I have a list of comments in my database that returns the following entries:
The comment field is a TEXT which includes paragraph breaks. My question is: how do I return these breaks inside Knockout?
<p data-bind="text: comment"></p>
will return
<p data-bind="text: comment">paragraph 1
paragraph 2
paragraph 3</p>
I also tried the html binding, but that only seems to wrap HTML around the returned value, not inside it. So is there a way to add a </p> <p> between the breaks without having to resort to <pre>?
Thanks!
You could use a computed observable to format the text. Here's an example: http://jsfiddle.net/badsyntax/dcVZq/
I split the text on the paragraph character, then join it with opening and closing <p> tags:
'<p>' + this.text().split('ΒΆ').join('</p><p>') + '</p>';
Related
I am not sure I gave correct title to my question but I want to ask to do something like:
I want to get HTML content of parent element. By doing this, this will also include HTML tags of children element but I don't want that. I just want children HTML.
For Example:
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.<span><i>As you<br> can</i></span> see I have added <br> tag</p>
</div>
from above example If I use .text() jquery method to get div content I will get text only but not <br> tag. But if I use .html() jquery, this will also include <p class="boring_class" style='dflkdjf'>....</p> but I don't want that.
I just want html of children element which is:This is paragraph<br> content.As you can see I have added <br> tag.
How can I achieve that?
Final output should look like:
This is content of div This is paragraph <br> content.As you can see I have added <br> tag
As one possible interpretation of the question:
Get html of all children, including text [not in a children nodes]
You can use .contents() to include the text nodes of the parent (the parts that aren't in tags, eg "This is content of div") then loop through those to get either text or html depending on where it is, giving:
var output = $(".test").contents().map((i, e) => {
if (e.nodeType == 3)
return $(e).text();
return $(e).html()
})
.toArray()
.join(" ");
console.log(output)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p>
</div>
Note this includes all whitespace (newlines) which were not included in the question's example output, so you may need to remove these for an exact match.
You can accomplish this in regular javascript by using innerHTML as shown below.
For more info, see: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
const list = document.getElementsByClassName("test")[0];
const inner = list.innerHTML;
const noP = inner.replace(/<p[^>]*>/g, "").replace(/<\/p[^>]*>/g, "").replace(/\n/g,'');
console.log(noP);
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p>
</div>
I have a rich text editor on my site and I am trying to create a reliable word counter for it.
Because it's a rich text editor it (potentially) contains html.
This html might be, for example:
<div class="textEditor">
<h1><strong>this is a sample heading</strong></h1>
<p><br></p>
<p>and this is a sample paragraph</p>
</div>
To get a reliable word count I am trying to first convert the html to text using:
var value = $('.textEditor').text()
The problem I am facing is the string that is returned seems to concatenate where it removes the html tags and what I am left with is:
this is a sample headingand this is a sample paragraph
as you can see, the words 'heading' 'and' are joined to become 'headingand' which would give me a word count of 10 instead of 11.
any thoughts on how to properly achieve this would be much appreciated :)
You can use innerText:
var value = document.querySelector('.textEditor').innerText
or
var value = $('.textEditor')[0].innerText
console.log(document.body.innerText)
<div class="textEditor">
<h1><strong>this is a sample heading</strong></h1>
<p><br></p>
<p>and this is a sample paragraph</p>
</div>
I had a bit of playing around with it and came up with the following:
let value = $('.textEditor').text();
function read(){
alert(value.trim().split(/\s+/).length);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="textEditor">
<h1><strong>this is a sample heading</strong></h1>
<p><br></p>
<p>and this is a sample paragraph</p>
</div>
<button onclick="read()">Read</button>
https://codepen.io/anon/pen/YOazqG?editors=1010
Just trim it and split and you should be fine.
Let's say I have a paragraph with some text that I get from some database:
<p>
{{ text }}
</p>
However, this text may contain some references to other pages in my aplication:
Sample text [reference] sample text
So I would like these references to get turned into links to said pages:
<p>
Sample text reference sample text
</p>
I tried using the replace function in the script like this:
text.replace(/\[(.+)\]/,"<a href='/path/to/$1'>$1</a>");
But the characters all get escaped resulting in the anchor html code getting shown on the page.
Is there a way to stop the characters from being escaped, or even another way to turn [references] in the middle of the text into working links to another page?
If you don't want your HTML to be escaped, use the v-html directive.
From the docs:
The double mustaches interprets the data as plain text, not HTML. In
order to output real HTML, you will need to use the v-html directive:
Example:
var app = new Vue({
el: "#app",
data: function() {
return {
text: "See defect <a href='#'>#12345</a> for details"
};
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<p>{{text}}</p>
<p v-html="text"></p>
</div>
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;text-align:
justify;line-height:normal">
First Text
<span lang="EN-US" style="font-size:12.0pt;
font-family:"Times New Roman","serif"">
Second Text</span>
</p>
This is my code, how to get the content inside the paragraph tag. [The tag may change to div or ul]. I need all the content inside the paragraph tag by javascript.
The output should be :
First Text Second Text
Sorry I am new to javascript, searched but cant find answer for this relevant problem. Thanks
To get the value of a tag, you can get the element with a selector and use innerHTML to get the value. like this:
<p>hi there</p>
console.log(document.getElementsByTagName('p')[0].innerHTML);
n.b. in the code above it's selecting by tag name, so it returns an array of matching elements
So in your example, using .innerHTML with give you the P tags content, including any html tags etc.
if you want just the content, you can use .textContent
console.log(document.getElementsByTagName('p')[0].textContent);
This wont give you the inner html tags
n.b. there is also the innerText method, However this isnt supported accross browsers.
You can change according to the tag you need, but basically this will do the trick:
document.getElementsByTagName('p')[0].innerText
Fiddle
InnerText should be a good solution.
console.log(document.getElementsByTagName('p')[0].innerText);
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;text-align:
justify;line-height:normal">
First Text
<span lang="EN-US" style="font-size:12.0pt;
font-family:"Times New Roman","serif"">
Second Text</span>
</p>
index.html
<p class="feed-text" style="word-wrap:break-word;margin-top:10px;">testing Ist part <a style="text-decoration:underline;color:blue" href="http://www.youtube.com/watch?v=aqveRU1eAmA" target="_blank">http://www.youtube.com/watch?v=aqveRU1eAmA</a> testing 2nd part</p>
I want to add an <a> tag for "testing 2nd part" dynamically using java-script or iquery.
Is it possible.
Looks like you want to wrap text: http://jsfiddle.net/h9rxq/
$('p').contents().filter(function(){
return this.nodeType === 3;
}).wrap(function(){
return $('<a/>', {href: "anyURL"});
});
A solution in jQuery using split and join to find the text testing 2nd part in all <p> tags and replace them with <a>testing 2nd part</a>
$("p:contains('testing 2nd part')").html(function(_, html) {
return html.split('testing 2nd part').join("<a>testing 2nd part</a>");
});
In your question you do not have a starting <p> tag add it like so:
<p>
testing Ist part
<a style="text-decoration:underline color:blue" href="http://www.youtube.com/watch?v=aqveRU1eAmA" target="_blank">http://www.youtube.com/watch?v=aqveRU1eAmA</a>
testing 2nd part
</p>