This question already has an answer here:
Replace text but not the HTML tags?
(1 answer)
Closed 8 years ago.
Suppose I've a HTML string
var _str = <div>The European languages are members of the same family. <div class="same">Their separate existence is a myth.</div> For science, music, sport, etc, Europe uses the same vocabulary. The languages only differ in their grammar, <div class="same">their pronunciation and their most common words.</div></div>
I want to replace the text same to <span class="highlighted">same</span>
I was doing _str.replace('same', '<span class="highlighted">same</span>'); so it is also replacing the class="same" to class="<span class="highlighted">same</span>"
Can anyone help me how to replace only text not anything inside the node ( <> )?
A simple solution is to add a whitespace before 'same', like this:
_str.replace(' same', ' <span class="highlighted">same</span>');
_str.replace(/([^"])same([^"])/g, '$1<span class="highlighted">same</span>$2');
As you noted, this solution is limited to this particular string. If you want to replace only the text between the HTML tags, parsing the HTML will be the safest option.
Related
This question already has answers here:
Parse an HTML string with JS
(15 answers)
Closed 3 years ago.
Take the following:
<span class='exclass'>1.</span> Lorem Ipsum <span class="exclass2" title="This is an example">*</span>
I am trying to create a regex expression that will select:
<span class='exclass'>1.</span>
AND
<span class="exclass2" title="This is an example">*</span>
Regex expressions like ^(<span(.*)<\/span>)$ select all of the text.
What expression will select the two complete tags and ignore the loose text between them? (Lorem Ipsum)
Regex is not good way to find HTML tags. But this should work for you-
<\s*span[^>]*>(.*?)<\s*\/\s*span>
DEMO: https://regex101.com/r/vbLN9L/6
I am getting below response from the API, and I want to convert it into proper html and would like to render it on dom, but it is rendering raw html and special characters.
example api response:
resp = {
body: "<p>Cali Thirty Seven turned what appeared to be certain defeat into an exhilarating and much-deserved victory late Saturday afternoon at Gulfstream Park. She reasserted herself after relinquishing the lead to 8-5 favorite Stormy Victoria to successfully defend her title in the $100,000 Powder Break Stakes.</p>\r\n<p>"
}
In the react component I am rendering it in the following way:
<p
className="newsDescription"
dangerouslySetInnerHTML={{ __html:this.props.story.desp }}
/>
I tried to escape html but it is not working.
You have to replace whatever html characters you have in your string to the corresponding tags. Since in your example you only have "<p> (which correspond to <p>) you can do this:
validate if this.props.story.desp has a value a is a string and then replace:
<span
className="newsDescription"
dangerouslySetInnerHTML={{ __html: this.props.story.desp.replace(/</g, '<').replace(/>/g, '>')}}
/>
This will generate a <span> element with a <p> element (the paragraph element coming from your API) inside the <span> with your text. Also, notice that this will replace all occurrences for creating the paragraph tags.
Unfortunately there is no generic vanilla javascript function for replacing all possible tags.
Note that I changed the <p> tag to a <span> because block elements should not have other block elements inside. Have a look at this question in SO.
This question already has answers here:
What to do Regular expression pattern doesn't match anywhere in string?
(8 answers)
Closed 8 years ago.
I want to use JavaScript to match ALL content between <div class="class-test"> and </div>. What RegExp should I use?
The complicated part is, there might be some more HTML tags inside it. For example:
<div class="class-test">
<div> this is a sub div </div>
<p>this is a p</p>
</div>
BTW, The HTML is not real HTML but just pure text. So it's not possible to 'parse' it. I am actually using Node.JS to modify a HTML file.
Thanks.
You can do this easily with a module like cheerio:
var cheerio = require('cheerio');
var $ = cheerio.load('<div class="class-test"><div> this is a sub div </div><p>this is a p</p></div>');
var content = $('div.class-test').html();
console.log(content);
I'd like to know how can I apply a regular expression to replace something inside a div.
Example:
<div class="counter">
Number of viewers: 12
</div>
I want to replace 12 with 13. I usually do
$var = $('.counter').text().replace(/\d+/g, '13');
$('.counter').text($var);
But I find this solution gross and unoptimized, I want an one line solution in order for Javascript/Jquery not to keep in memory a variable which may contains ten thousand characters.
A one-liner will still suffer from the same problem: a string with 10,000 characters will be needlessly created.
The real problem is your HTML. Structure it better:
<div class="counter">
Number of viewers: <span id="num-viewers">12</span>
</div>
You can now update the number directly:
$('#num-viewers').text('13');
I'm having a problem writing a regular expression for matching HTML tags. I found a similar entry here, but this didn't quite work in my case.
Here's my test string:
<div id="div0" class="myclass">here's some text
that may include whitespace</div><div id="div1" class="myclass">
and some more here
</div>
And here's my regex based on the aforementioned entry:
<div[^>]*class="myclass">[^~]*?<\/div>
Note that I need to match the first instance of <div /> with class of "myclass." The content may have carriage returns. These <div> tags won't be nested.
Here's a rubular page for testing: http://rubular.com/r/vlfcikKMXk
That regex tested is not great. It is in fact matching as you want it to, but it is matching it multiple times (2 different matches), and not showing a difference, you only want the first match.
Go here:
http://gskinner.com/RegExr/
Test it there, turn off the 'global' you will see it working.