How can I replace my binding data's < br > with line break?
like: passing data:
Hello< br >welcome to this group< br >type your text
and viewing data will be :
Hello
welcome to this group
type your text
to replace < br > with line break, I have used [innerHTML] like, <p [innerHTML]="a.Details">; but here problem is, all letter are come as Capital formate.
Is there any alter form?
You can use different div.
eg.
<div> Hello </div>
<div> welcome to this group </div>
<div> type your text </div>
You could split the text from <br> and will have an array of each line.
on the HTML side you can loop through the lines and use <p *ngFor=let line of text>{{line}}</P> to display them.
.ts file
text: string = 'Hello< br >welcome to this group< br >type your text';
lines: string[] = this.text.split('< br >');
.html file
<p *ngFor="let line of lines">{{line}}</p>
You can use this way to update your code :
<p [innerHTML]="replaceBreaksWithLineBreaks(a.Details.toLowerCase())"></p>
and your JS function
replaceBreaksWithLineBreaks(text: string): string {
return text.replace(/<br>/g, '\n');
}
Related
This question already has answers here:
How to keep Quill from inserting blank paragraphs (`<p><br></p>`) before headings with a 10px top margin?
(3 answers)
Closed 1 year ago.
I have some HTML as a string
var str= "<p><br/></p>"
How do I strip the p tags from this string using JS.
here is what I have tried so far:
str.replace(/<p[^>]*>(?:\s| )*<\/p>/, "") // o/p: <p><br></p>'
str.replace("/<p[^>]*><\\/p[^>]*>/", "")// o/p: <p><br></p>'
str.replace(/<p><br><\/p>/g, "")// o/p: <p><br></p>'
all of them return me same str as above, expected o/p is:
str should be ""
what im doing wrong here?
Thanks
You probably should not be using RegExp to parse HTML - it's not particularly useful with (X)HTML-style markup as there are way too many edge cases.
Instead, parse the HTML as you would an element in the DOM, then compare the trim()med innerText value of each <p> with a blank string, and remove those that are equal:
var str = "<p><br/></p><p>This paragraph has text</p>"
var ele = document.createElement('body');
ele.innerHTML = str;
[...ele.querySelectorAll('p')].forEach(para => {
if (para.innerText.trim() === "") ele.removeChild(para);
});
console.log(ele.innerHTML);
You should be able to use the following expression: <p[^>]*>( |\s+|<br\s*\/?>)*<\/p>
The expression above looks at expressions enclosed in <p>...</p> and matches them against , whitespace (\s+) and <br> (and / variations).
I think you were mostly there with /<p[^>]*>(?:\s| )*<\/p>/, but you just needed to remove ?: (not sure what you were trying to do here), and adding an additional case for <br>.
const str = `
<p><br></p>
<p><br/></p>
<p><br /></p>
<p> <br/> </p>
<p> </p>
<p> </p>
<p><br/> </p>
<p>
<br>
</p><!-- multiline -->
<p><br/> don't replace me</p>
<p>don't replace me</p>
`;
const exp = /<p[^>]*>( |\s+|<br\s*\/?>)*<\/p>/g;
console.log(str.replace(exp, ''));
I have the following code. I'm trying to change all instances of hello to hey. I have created a variable text to store the string. I have then tried the replace method on that string, but it does not change the string. I want the text in the <p> element tags to be changed to hey hey hey hey, but it does not change. What am I doing wrong?
HTML:
<p id="1">hello hello hello hello</p>
Javascript:
var text = document.getElementById("1").textContent;
text = text.replace(/hello/g,"hey");
You could do like this .
Why not working
For that initial call text= elem.textContent its read the value.
On the second time set text=replace value is not possible .Because the text only have string p elem not a DOM elem
var text = document.getElementById("1").textContent;
console.log(text) //direct string
text = text.replace(/hello/g, "hey")
<p id="1">hello hello hello hello</p>
Solution
var text = document.getElementById("1");
console.log(text) //dom element
text.textContent = text.textContent.replace(/hello/g, "hey")
<p id="1">hello hello hello hello</p>
Is it possible to insert a string, in my case <br> at a specific index ignoring HTML tags ?
I have <span style="font-family:Arial;font-size:14px">Here is my text</span>
Is it possible to add the after HER , or any other solution is welcomed
It should look : <span style="font-family:Arial;font-size:14px">Her<br>e is my text</span>
Edit:
I need to call a function like :
insertBR(htmlContent,3)
Something rather simple with some jquery and string replacement.
/*
Gets the text of the element then matches every 3 letters into an array then joins them with <br>
*/
var text = replaceText($('span').text(), 3);
$('span').html(text);
function replaceText(string, index) {
return string.match(new RegExp(".{1," + index + "}", "g")).join('<br>')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span>Here is my text</span>
EDIT
Added index
Let's say I have a text :
<p> hello world! </p>
and I am using a function that cut the text after 5 words and adds " ...show more"
I want the result to be like this :
hello ... show more
Because of the <p> tags what I get is this output :
hello ...show more
what I see when I inspect the element is this :
<p> hello </p> ...show more
I must mention that the text can be with <p> or without.
Is there a way to solve this problem ?
Is there a way to insert the added text inside the <p> tag ?
I need to mention that I need the <p> tags, I can't use strip tags function.
Thanks,
Yami
Do you mean this?
var text = "<p>hello world</p>";
var res = "<p>" + text.substring(3, 8) + " ...show more</p>";
It results in:
<p>hello ...show more</p>
The way I see it, you have two options:
.split() the string by spaces (assuming a space separates words) then slice the first (up to) 5 elements. If there are greater than 5 element, add "...read more"; if not, it's unnecessary.
You can use some regex replace and (with a negative lookahead) ignore the first 5 words, but replace all other text with your "...read more". (I personally find this one having more overhead, but you could probably use (?!(?:[^\b]+?[\b\s]+?){5})(.*)$ as a pattern)
Having said that, here's what i mean with a string split:
function readMore(el){
var ary = el.innerHTML.split(' ');
el.innerHTML = (ary.length > 5 ? ary.slice(0,5).join(' ') + '... read more' : ary.join(' '));
}
var p = document.getElementById('foo');
readMore(p);
Assuming of course, for the purposes of this demo, <p id="foo">Hello, world! How are you today?</p> (which would result in <p id="foo">Hello, world! How are you...read more</p>)
$('p').text($('p').text().replace('world!', '... show more'));
I need to select a text using javascript that is between round brackets, and wrap it all in a span:
<p>Just some text (with some text between brackets) and some more text</p>
should become:
<p>Just some text <span class="some-class">(with some text between brackets)</span> and some more text</p>
I think something like this should be possible using regex, but i'm totally unfamiliar with using regex in javascript. Can someone please help? Thanks!
This should do the trick (str is the string holding the text you want to manipulate):
str.replace((\([^()<>]*\)), "<span class=\"some-class\">$1</span>");
It disallows (, ), < or > within the parenthesis. This avoids nesting issues and html tags falling in the middle of the parenthesis. You might need to adapt it to meet your exact requirements.
Since you're new to regular expressions, I recommend reading http://www.regular-expressions.info/ if you want to learn more.
oldString = '<p>Just some text (with some text between brackets) and some more text</p>';
newString = oldString.replace(/\((.*?)\)/g, '<span class="some-class">($1)</span>');
Try this:
<p id="para">Just some text (with some text between brackets) and some more text</p>
<input type="button" value="Change Text" onclick="ChangeText()"/>
<script>
function ChangeText()
{
var para = document.getElementById("para");
var text = para.innerHTML;
para.innerHTML = text.replace(/(.*)(\(.*\))(.*)/g, "$1<span class=\"some-class\">$2</span>$3")
}
</script>
Using RegExp object:
var str = "<p>Just some text (with some text between brackets) and some more text</p>";
var re = new RegExp("\(+(.*)\)+", "g");
var myArray = str.replace(re,"<span class="some-class">($1)</span>" );
Using literal:
var myArray = str.replace(/\(+(.*)\)+/g,"<span class="some-class">($1)</span>")