I have a textarea field where users enter in the information which then gets stored in a JS variable used to for a POST API request however since there are no line breaks as it renders into HTML, all the text is on one line.
How would I be able to prefix the Affecting, Actions Taken & Next Steps with the HTML <br> tag in JavaScript?
Current output:
Affecting: Lorem IpsumActions Taken: Lorem IpsumNext Steps:
Desired output:
<br>Affecting:
<br>Actions Taken:
<br>Next Steps:
TIA
It looks to me that you want something like this:
console.log(document.getElementById('txt').value.replace(/\n/g, '<br>'))
<textarea id="txt" rows="3" cols="30">Affecting: Lorem Ipsum
Actions Taken: Lorem Ipsum
Next Steps:</textarea>
The text returned in your textarea-value has \n characters in it to mark line endings. In most HTML elements these marks are ignored. You can make them visible in <pre> elements or even in "normal" <divs>s or <p>s if you format them with white-space:pre see here white-space.
In my snippet above I simply replaced each \n by a <br>.
A tag will show as the text of a tag and not render in a textarea, you want newlines.
const val = 'Affecting: Lorem IpsumActions Taken: Lorem IpsumNext Steps:'.replace(/: /g, ': \n');
document.getElementById('txt').value = val;
<textarea id="txt"></textarea>
Related
I want to prevent users to enter multiple empty paragraphs in the text editor and using the following approach I can remove a single <p><br></p> from the message text in the text editor.
var str = content.replace('<p><br></p>', '');
However, I need to remove all of the <p><br></p> parts like <p><br></p><p><br></p>Lorem Ipsum is simply dummy text<p><br></p><p><br></p><p><br></p>. Is there a smarter way e.g. regex or method to perform this in a single operation?
your replace will only remove exactly '<p><br></p>'.
Removing elements without content (or only whitespace content) using a proper DOM-method may be more successful. The snippet demonstrates that for some hypothetical elements in a mockup document body.
document.body.innerHTML = `
<p><br></p>
<p>
<br>
</p>
<p>Lorem Ipsum is simply dummy text</p>
<p>
<br>
</p>
<p><br> </p>
<p><br></p>
<p> <br>
<p><br></p>
</p>`;
document.querySelectorAll("p").forEach(el => {
if (!el.textContent.trim()) {
el.parentNode.removeChild(el)
};
});
console.log(document.body.innerHTML.trim());
use regex to replace the content.
content.replace(/<p><br><\/p>/g, "");
I have string text (for example in Russian) with HTML tags
I need to get all word with a JavaScript RegEx and exclude HTML tags
This is my RegEx
reg = /([^\r\n\t\f>< /]+(?!>))\b/g;
For example, in Russian, I need to keep all HTML tags in my string text but keep all work in Russian ( [\wа-я]+)
Its is possible to exclude & include some things in JavaScript RegEx?
I would not try to parse HMTL with regexp. Instead, get the innerText property of the DOM node:
HTML:
<div id="myRussianText">
Lorem <span>ipsum</span>
</div>
JS:
var el = document.getElementById('myRussianText');
var text = el.innerText; // 'Lorem ipsum'
https://jsfiddle.net/cn0np3yf/
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>';
My application dynamically gets HTML code from my website and saves it as a String.
Here's an example:
Lorem ipsum Click Here
Lorem ipsum Click Somewhere
Lorem ipsum sdfsdf
Lorem ipsum djmhfhb
Lorem ipsum fgbnfgn
What I now need is a script that takes all the tags and replaces their innerHTML with "LINK". The result should be:
Lorem ipsum LINK
Lorem ipsum LINK
Lorem ipsum LINK
Lorem ipsum LINK
Lorem ipsum LINK
I'd usually use jQuery like this:
$(a).html = "Link"
But I don't want to remove the innerHTML of the links in my app but those inside the String which contains the HTML of my website.
I don't use PHP. I use any kind of JS that helps me out.
Any ideas? Thank you very much for your help!
this is how you do that with jQuery:
$('a').text('LINK');
Using jQuery's .text()
For instance:
$("a").text("LINK");
Try this code in js script
give id on anchar tag
<a href="www.google.com" id="hello" />Click<a>
and use like this
$('#hello').html('LINK');
or
$('a').text('LINK');
It's unclear why you would not want to use jQuery .html() or .text() in your app but manipulate the string containing the html instead?
Doing that will require some kind of Regex pattern like this
var pattern = "<a .*?href=['""](.+?)['""].*?>(.+?)</a>";
and then use string.Replace passing in a RegExp object
Something like
var regex = new RegExp(pattern);
"yourString".replace(regex , "LINK");
IF you're getting those markups as string, not DOM fragment, you can try this:
http://jsfiddle.net/YVb5k/
var str="HTML markup";
if ((new DOMParser()).parseFromString("", "text/html")) {
var html = (new DOMParser()).parseFromString(str, "text/html");
} else {
var html = document.implementation.createHTMLDocument("");
html.body.innerHTML = str;
}
var as = html.getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
as[i].innerHTML = "LINK";
}
console.log(html.body.innerHTML);
Works only in IE>=9, though.
Im using this jquery plugin for searching text :"http://code.google.com/p/jquery-highlight/downloads/list "..
But im not able to wrap this code in angular js ,
I mean to say "i'm unable to write a directive to call this jquery plug in"...!!!
Updated :
Same post in Google group:
This is the group
UPDATE: This is just an example. You can modify as per your needs.
You don't need RegExp comparison for that.
Lets make simple use of javascript's split() function
1) Define a style for highlighting.
.srchslctn{
background-color: yellowgreen;
color: red;
}
2) Your sample HTML
<body>
<div>
<div id="serach-Paragraph">
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</div>
<input type="button" id="h" value="Highlight"/>
<div id="target"></div>
</div>
</body>
3) JavaScript
$(document).ready(function(){
$("#h").on('click',function(){
highlight();
});
});
function highlight(){
$("#target").empty();
var mainString = $("#serach-Paragraph").html();
var searchString = "ipsum";
var arr = mainString.split(searchString);
var len = arr.length;
var finalString="";
for(var i=0;i<arr.length;i++){
finalString+=arr[i];
if(i<len-1){
finalString+='<span class="srchslctn">'+searchString+'</span>';
}
}
$("#target").html(finalString);
}
Thats it....
Explanation -: split() will break the targetString according to your searchString. This is similar to how we retrieve comma separated values. Only thing is in this case your search string acts like comma :)
Then keep arr[0] as it is.
Highlight your search string and append it to arr[0].
Append arr[1] to above result and so on.
Simple....
Searched text as in you have to only highlight the matched part keeping rest of the text as it is?
You can use Angular-UI Highlight filter.