Hi I would like to do a Word Count in my RTE (Rich Text Editor) with javascript can also use with jquery. But it should not count the html tags and repeating white spaces.
Sample Text:
<h1>Hello World</h1> <p> This is Good!!!</p> answer <h2>thanks! </h2>
The javascript should display 7 only.
Is there any javascript code for this and that is also fast to calculate the Word Count?
Thanks!
EDIT
What if the sample text is this: <p>11 22 33</p><p>44</p>5<br></div>
The javascript should display 5 only.
First you need to get text content of element. You can get text of element using text(). Then you need to remove additional space of text. trim() and replace(/[\s]+/g, " ") remove additional space in text. Now you can convert text to word using split() method.
var length = $(".text").text().trim().replace(/[\s]+/g, " ").split(" ").length;
console.log(length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
<h1>Hello World</h1>
<p> This is Good!!!</p>
answer
<h2>thanks! </h2>
</div>
Related
I have some messy html due to OCR that I need to highlight. Words are sometimes split between dom nodes. I need to search for any user input text and add a highlight span around wherever that text appears in the html.
Example
<div id="content">
<span>my birthday par<span>ty is today</span></span>
</div>
The search term here would be "birthday party". I have tried to regex but am unable to capture the right group.
(regex noob) new RegExp(`([${searchTerm}]+)!?<[^>]*>`, 'gi') which is producing ["y birthday pa<span>", "day</span>"]
I would need to capture something like my Birthday par<span>ty or the index of that so I can wrap it in another element to highlight.
Ideal outcome would be
<div id='content'>
<span>my<mark class='highlight'>birthday par<span>ty</mark> is today</span><span>
</div>
Thanks in advance!
I am having trouble with some code for a chrome extension. The code is supposed to replace a word with another one. It does this, however, I would only like it to replace a word if it is within certain tags such as <p></p> or header tags. At the moment it replaces all the words in the HTML file within the <body></body>. This sometimes interferes with the HTML code and can break certain features of a website. Here's what I have currently.
document.body.innerHTML = document.body.innerHTML.replace(newRegExp("old", "g"), "new");
Thank you for the help!
So just loop over all the elements that you care about and do the replacement on those elements only.
// Get all the elements that you care about into an array
let elements = Array.prototype.slice.call(document.querySelectorAll("p, header"));
// Loop over the items in the array
elements.forEach(function(el){
// Do the replace on the element
el.textContent = el.textContent.replace(/text/g, "letters");
});
<header>This is some text in a header</header>
<h1>This is some text in an h1</h1>
<div>This is some text in a div</div>
<p>This is some text in a p</p>
<div>This is some text in a div</div>
<div>This is some text in a div
<p>This text is inside of a p with lots of text</p>
</div>
I want to keep only all these tags <strong></strong> , <em></em>, <p></p> , <strike></strike> etc right now i am using JavaScript regex like this.
var s = "<div><p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> <span>this is span tag</span> <img src=''><br> final words</div>";
console.log(s.replace(/\<(?!strong|br|em|p|u|strike).*?\>/g, ""));
It is working 50% fine because it is not removing my defined html tags, but problem is it is removing all end tags here is how i am getting the output
Output :
<p>p tag <strike>Strike <strong>strong in <u>underline <em>italic this is span tag <br> final words
but i need the output something like this
Required Output:
<p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> this is span tag <br> final words
Is there any javascript expert there who could help me with this i really appreciate your help.
Thanks
Match closing tags with an optional / right after the < and use positive lookahead for a word character (to ensure / doesn't get matched):
var s = "<div><p>p tag</p> <strike>Strike</strike> <strong>strong</strong> in <u>underline</u> <em>italic</em> <span>this is span tag</span> <img src=''><br> final words</div>";
console.log(s.replace(/<\/?(?=\w)(?!strong|br|em|p|u|strike).*?>/g, ""));
// ^^^^^^^^^
But regular expressions generally shouldn't be used in an attempt to parse anything but the most trivial HTML
I've a long text (More than 10,000 words) contains html tags stored in a string.
And want to wrap every 1000 words with <div class="chunk"></div> with considering auto close opened html tags and auto open closed html tags in the different chunks.
I found many solutions but they depend on the number of characters and don't consider auto open/close html tags.
Also the php function wordwrap neglects fixing html tags problem.
Simulation
<div id="long-text">
Dynamic long text more than 10,000 words (Text contains HTML (img, p, span, i, ...etc) tags)
</div>
Wrong result
<div id="long-text">
<div class="chunk">
<p>Chunk 1 : first approximately 1000 words with their html tags
<img src="image.jpg"> ## Unclosed <p> tag ##
</div>
<div class="chunk">
## The closed <p> tag of the previous chunk ##
</p><p>Chunk 2 : second approximately 1000 words with their html tags
<img src="image.jpg"> </p><p> ## unclosed <p> tag ##
</div>
<div class="chunk">
## Missing open <p> tag because it was cut in the previous chunk ##
Chunk 3 : third approximately 1000 words with their html tags</p>
</div>
</div>
Expected result
<div id="long-text">
<div class="chunk">
<p>Chunk 1 : first approximately 1000 words with their html tags
<img src="image.jpg"> </p>
</div>
<div class="chunk">
<p>Chunk 2 : second approximately 1000 words with their html tags
<img src="image.jpg"> </p>
</div>
<div class="chunk">
<p>Chunk 3 : third approximately 1000 words with their html tags</p>
</div>
</div>
And then i can paginate the result with javascript.
After searching i found the accepted answer here: Shortening text tweet-like without cutting links inside
cutting the text (from the start only) and auto close opened html tags.
I tried to modify the code to auto open closed tags if i cut from the middle of the text but unfortunately i failed to do the job.
I don't mind if there are another better solutions to paginate the long text according to the number of words using (php or javascript or both of them).
So the idea is to use JQuery to chunk the immediate children via cloning and splitting the internal text. It may need some more work for further nested HTML but it's a start:
function chunkText(length) {
var words = $(this).text().split(" ");
var res = [$(this)];
if (words.length > br) {
var overflow = $(this).clone();
var keepText = words.slice(0,length);
$(this).text(keepText.join(" "));
overflow.text(words.slice(length).join(" "));
res = res.concat(chunkText.call(overflow, length));
}
return res;
}
var br = 10; //Words to split on
$("#long-text > *").each( function () {
var chunks = chunkText.call(this,br);
$.each(chunks, function (i,v) {
$("#long-text")
.append($("<div>").addClass("chunk").append(v))
.append($("<img>").attr("src","image.jpg")));
});
});
Basic demo:
https://jsfiddle.net/o2d8zf4v/
below is the <div> and <textarea> in my webpage
<div id="div_1" onclick="document.getElementById("textarea_1").innerHTML=document.getElementById("div_1").innerHTML;">
paragraph 1
paragraph 2
paragraph 3
paragraph 4
</div>
<textarea id="textarea_1"></textarea>
when i click the div i need to show <div> innerHTML to <textarea>
but its coming like below
<textarea id="textarea_1">paragraph 1<br><br>paragraph 2<br><br>paragraph 3<br><br>paragraph 4</textarea>
i need output like this (correct format of <div> )
<textarea id="textarea_1">
paragraph 1
paragraph 2
paragraph 3
paragraph 4
</textarea>
Your onclick is malformed. You are delimiting it with " and are using " as the inner string delimiters as well.
You are also using a comparison operator == instead of an assignment operator =.
onclick="document.getElementById("textarea_1").innerHTML==document.getElementById("div_1").innerHTML;"
This will work better:
onclick='document.getElementById("textarea_1").innerHTML=document.getElementById("div_1").innerHTML;'
Now, to address the actual question - getting <br> elements when you want line breaks.
When you do:
document.getElementById("div_1").innerHTML
You need to replace the <br> elements with line breaks:
document.getElementById("div_1").innerHTML.replace(/<br>/g, "\n")
document.getElementById("textarea_1").innerHTML = document.getElementById("div_1").innerHTML.replace(/<br>/g, "\n");
This should do the trick, you have to replace <br> tags by real newline character.
Instead of innerHTML you could use value on textarea
<!doctype html>
<html>
<head>
<title>Site Title</title>
</head>
<body>
<div id="div_1" onclick="document.getElementById("textarea_1").value = document.getElementById('div_1').innerHTML;">
paragraph 1
paragraph 2
paragraph 3
paragraph 4
</div>
<textarea id="textarea_1"></textarea>
</body>
`