I'm a little confused due to when I insert a text stored in mysql in a div I use the following sentence to insert the text:
<div class="menssge_holder"><?php echo str_replace("\n", "</p>", $conversation[$i]['message']); ?></div>
That sentence works fine, but when the user enter a new message in a textarea and press send button, i put that text within the div_holder and '\n' do not take effect.
What's the equivalent I should use in javascript or jQuery?
Thanks.
This will generate incorrect html. You will have a bunch of </p> with no <p> if you want to replace \n with a new line, try <br /> instead of </p>. As suggested above my #MarcB you may also want to try replacing \r\n.
Replace </p> with <p> or <br /> and it would work. Also, if you are using p, giving CSS to p this way will be helpful:
p {margin: 0 0 15px;}
<div class="menssge_holder"><?php echo str_replace(/\n/ig, "<br />", $conversation[$i]['message']); ?></div>
In your case you need something like this:
jsBin demo
$('#post').click(function(){
var copyThis = $('#textarea').val().replace(/\n/ig, '<br />');
$('#result').html( copyThis );
});
Related
Suppose i have textbox :-
<input type="text" name="content" id="content"/>
And i am trying append text to this input box in the following manner:-
document.getElementById("content").value+= "A";
The output is something like:-
AAAA....
Each time, the text is getting appended in the same line, how can make the text to append each time to the new line? Like that of below.
A
A
A
.
.
Instead of an input type text, you can use a text area and then style it to look like a text box.
<textarea name="textarea_content" id="tx_content"></textarea>
document.getElementById("tx_content").value+= "A\n";
document.getElementById("tx_content").value+= "A\n";
JSFiddle: https://jsfiddle.net/sx7t3ykc/
The input textbox will support one single line. not multiple lines. that is it's behaviour. That's why your text is shown in a single line.
If you need multiple lines, then you need to use <textarea></textarea> element
input is used for a single line. Try using textarea.
Refer code below:
<textarea type="text" name="content" id="content">
</textarea>
and js will be like this:
document.getElementById("content").value+= "A\n";
I have made you an example that appends a new "A" char every 5 seconds. I use textarea instead of the input tag.
setInterval(appendNewChar, 5000)
function appendNewChar()
{
document.getElementById("myTextArea").value += "A\n";
}
<textarea id="myTextArea"></textarea>
As #GuyFromChennai said, you have to use tag instead of , also, writing '\n' will make the line break, I tried this:
<textarea name="content" id="content"></textarea>
for (let i=0; i<3; i++){
document.getElementById("content").value+= "A\n"";
}
I'm wanting to remove the p tags that wrap img tags by default in ckeditor.
I don't want to totally disable p tags or change the EnterMode to another tag. I only want to stop images being wrapping in paragraphs.
I want this done client side, not server side.
I have:
<p>Some text in a parapgraph.</p>
<p><img src="picture.jpg"></p>
<p>Another paragraph</p>
I want:
<p>Some text in a parapgraph.</p>
<img src="picture.jpg">
<p>Another paragraph</p>
Quick fix:
This will work if there is nothing else on the line except the three tags.
$str = "<p><img src=\"/file.jpg\" width=\"1\" height=\"2\" /></p>"
$replaced = preg_replace ( "/<p[^>]*?>(<img[^>]+>)<\/p>/" , "$1" , $str )
Updated:
Here is a PHP function. You can call it from JavaScript.
function filter_ptags_on_images($content){
return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);
}
add_filter('the_content', 'filter_ptags_on_images');
Reference
jQuery solution to unwrap the img tag at display time. (It won't stop the paras being put in though.)
<script>
$("p img").unwrap();
</script>
It will also unwrap any other images you have on the page, so you'd probably want a tighter selector.
I have to assign an HTML string through the following Javascript code. However, this seems to be possible only if I put all the HTML on one line.
This works:
var assignedhtml = "<div> <p>It's the most beautiful thing I've seen in my life </p> <p> It's watermalone </p> </div>"
This does not work:
var assignedhtml = "<div>
<p>It's the most beautiful thing I've seen in my life </p>
<p> It's watermalone </p>
</div>"
The issue is that I have too many lines my html code. In the past, I have individually removed all the \n (newline) characters. Is there a simpler way to achieve the variable assignment I intend without having to individually go through the lines and delete the newline characters?
i.e., I want to keep the html code on the right as is in the second case above, but remove the newlines before assigning it to the variable.
There's no equivalent to, for instance, PHP's heredoc but you can add backslashes to escape the hard returns:
var assignedhtml = "<div>\
<p>It's the most beautiful thing I've seen in my life </p>\
<p> It's watermalone </p>\
</div>";
Here's a working example: http://jsfiddle.net/9W6BS/
One more variant - use '\' symbol at the and of line
Valid code example
var assignedhtml = "<div>\
<p>It's the most beautiful thing I've seen in my life </p>\
<p> It's watermalone </p>\
</div>"
Also want to note, that some tools ( like webStorm or PhpStorm) allow to edit such injections in normal mode ( Alt + enter - edit HTML Fragment )
You can do it like this:
var assignedhtml = '<div>' +
'<p>It\'s the most beautiful thing I've seen in my life</p>' +
'<p>It\'s watermelon</p>' +
'</div>';
I am trying to assign to <p> element a large amount of text, which includes some <br /> tags inside, as it's html. I am using the .html() method from JQuery, but it wont show the line breaks.
My code:
var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);
it does add the text as 'myPClass' html, but it totally ignores the <br/> tags.
the result i am getting is:
<p class='myPClass'>Hello, this is a pretty large text with some line breaks inside</p>
so it would look like:
"Hello, this is a pretty large text with some line breaks inside"
what i want my result to be:
<p class='myPClass'>Hello, this is a pretty <br/> large text with some <br/> line breaks inside</p>
so it would look like:
"Hello, this is a pretty
large text with some
line breaks inside"
what is wrong with my code? or how can i get to do this?
You can also try the following:
var text = "Hello, this is a pretty" + "<br/>" + "large text with some" + "<br/>" + "line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);
Try this
var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'></p>");
$('.myPClass').html(text);
Consider the following HTML page fragment:
<div id='myDiv'>
Line 1.<br />
Line 2<br />
These are <special> characters & must be escaped !##><>
</div>
<input type='button' value='click' id='myButton' />
<textarea id='myTextArea'></textarea>
<script>
$(document).ready(function () {
$('#myButton').click(function () {
var text = $('#myDiv').text();
$('#myTextArea').val(text);
});
});
</script>
First, there is a div element with id myDiv. It contains some text similar to what might be retrieved form a SQL database at runtime in my production web site.
Next, there is a button and a textarea. I want the text in myDiv to appear in the textarea when the button is clicked.
However, using the code I provided, the line-breaks are stripped out. What can I do about this, taking into consideration that escaping special characters is absolutely non-negotiable?
Your code works great for me in both Firefox and Chrome: http://jsfiddle.net/jYjRc/
However, if you have a client that doesn't do what you want, replace <br>s with newline characters.
Edit: Tested in IE7 and the code breaks. So I updated the fiddle with my suggestion: http://jsfiddle.net/jYjRc/1/
Do your HTML like so:
<div id='myDiv'><pre>
Line 1.
Line 2
These are <special> characters & must be escaped !##><>
</pre></div>
And now .text() will return the text exactly as you specify it in the <pre> tag, even in IE.