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.
Related
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>
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'm trying to make a javascript function that displays different string every 7 days for example. And I want to display that string in a footer of an html.
The part that bugs me is how to insert that string in a paragraph in html (or anything that will display the text).
I have 2 dimensional array in .js, let's say:
array = [[first1,first2],[second1,second2],[third1,third2],[fourth1,fourth2],[fifth1,fifth2]];
And I want do display, let's say
array[2][0] in one paragraph and
array[2][1] in another paragraph.
let's say
<div>
<p>In here i want array[2][0]</p>
<p>In here i want array[2][1]</p>
</div>
Please help.
HTML:
<div>
<p>In here i want <span id="placeholder-1"></span></p>
<p>In here i want <span id="placeholder-2"></span></p>
</div>
JS:
document.getElementById('placeholder-1').innerHTML = array[2][0];
document.getElementById('placeholder-2').innerHTML = array[2][1];
Fiddle: http://jsfiddle.net/8N95j/
select the html element by document.getElementById/getElementsByClassName and attach the js value like
var ele = document.getElementById('footerid');
ele.innerHTML += array[2][0];
note: getElementsByClassName would give u an array
update
here is a working fiddle using the same markup u shared.
One different approach would be to use a framework like Ember or AngularJS. These are quite easy to put in place nowadays, and leads to much easier to maintain code. For instance, your HTML would look like
<div ng-controller='MyController'>
<p>In here i want {{ array[2][0] }}</p>
<p>In here i want {{ array[2][1] }}</p>
</div>
where MyController references an AngularJS controller (basically a simple javascript object which defines a $scope in which the array is defined.
At that point, you no longer need to update the HTML, ever. Whenever your javascript does something like array[2][0] = 'foo' the HTML is automatically updated in real-time.
Use the below code to dynamically create a p tag and append it in a container div
HTML :
<div id="container">
<p>In here i want Test1</p>
</div>
JS :
var array = [['first1','first2'],['second1','second2'],['third1','third2'],['fourth1','fourth2'],['fifth1','fifth2']];
//If needed for loop can start here
var para = document.createElement("p");
para.innerHTML = 'In here i want ' + array[2][0];
document.getElementById('container').appendChild(para);
DEMO
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.