We Keep Coding

Highlight Ajax Response with Javascript

I'm trying to highlight a query inside a text coming from an ajax response, before constructing HTML with it and pasting that into the DOM. Right now I'm using this code snippet:
function highlightWords(line, word, htmltag) {
var tag = htmltag || ["<b>", "</b>"];
var regex = new RegExp('(' + preg_quote(word) + ')', 'gi');
return line.replace(regex, tag[0] + "$1" + tag[1]);
}
function preg_quote(str) {
return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}
However, this is not capeable of highlighting different words if the query is something like sit behind. It will only highlight the complete phrase and not the single words. It also doesn't care about HTML tags and that produces unpretty results if the query is span for example...
I've found various libraries which handle highlighting way better, like https://markjs.io/ or https://www.the-art-of-web.com/javascript/search-highlight/
Those libraries though always want to highlight content which is already present in the DOM.
My search gets an ajax response, which I then turn into HTML with JS and paste the complete HTMLString into a parent container using DOM7 (which is similar to jQuery). Therfor I would prefer to highlight the text before creating the HTMLString and pasting it in the DOM.
Any ideas?

I just make the highlight in the response of ajax request. It's works for me:
$.ajax({
url : url,
type : 'POST',
success: function(response) {
// Highlight
let term = 'word';
$context = $("#selector");
$context.show().unmark();
if (term){
$context.mark(term, {
done: function() {
$context.not(":has(mark)").hide();
}
});
}
}
});

Snippet style: Warning: this uses DOM7 as per Question
Overview: Instead of appending the whole text as HTML string to your #container,
Append the portions of normal text, as text, and the highlighted elements as elements, so you can style them at will.
var text // your ajax text response
var strQuery = 'sit behind' // your query string
var queryWords = strQuery.split(' ')
var textWords = text.split(' ')
var bufferNormalWords = []
textWords.forEach(function (word) {
if (queryWords.indexOf(word) != -1) { // found
var normalWords = bufferNormalWords.splice(0, buffer.length) // empty buffer
// Your DOM7 commands
$$('#container').add('span').text(normalWords.join(' ')) // normal text
$$('#container').add('span').css('color', 'red').text(word + ' ') // why not red
}
else bufferNormalWords.push(word)
})
Do not mess up with text becoming HTMLStrings, just set text, and create the necesary elements to style them as you want with your DOM7.

If your ajax response contains html, I don't think there's an easy way to get around creating DOM elements first. Below gets the job done, even in the case where span is in the query and the ajax results contain <span>
function highlightWords(line, word, htmltag) {
var words = word.split(/\s+/);
var tag = htmltag || ["<b>", "</b>"];
var root = document.createElement("div");
root.innerHTML = line;
root = _highlightWords(words, tag, root);
return root.innerHTML;
}
// Recursively search the created DOM element
function _highlightWords(words, htmlTag, el) {
var children = [];
el.childNodes.forEach(function(el) {
if (el.nodeType != 3) { // anything other than Text Type
var highlighted = _highlightWords(words, htmlTag, el);
children.push(highlighted);
} else {
var line = _highlight(el.textContent, words, htmlTag);
var span = document.createElement("span");
span.innerHTML = line;
children.push(span);
}
});
// Clear the html of the element, so the new children can be added
el.innerHTML = "";
children.forEach(function (c) { el.appendChild(c)});
return el;
}
// Find and highlight any of the words
function _highlight(line, words, htmlTag) {
words.forEach(function(singleWord) {
if (!!singleWord) {
singleWord = htmlEscape(singleWord);
line = line.replace(singleWord, htmlTag[0] + singleWord + htmlTag[1]);
}
});
return line;
}

I think you were on the right track using a library for that.
I have been using for that a great library named mark.js.
It works without dependencies or with jQuery.
The way that you can make it work.
Make the AJAX call.
Load the string to the DOM.
Call the Mark.js API on the content you have loaded.
Here's a code snippet:
document.addEventListener('DOMContentLoaded', getText);
function getText() {
const headline = document.getElementsByTagName("h1")[0];
const p = document.getElementsByTagName("p")[0];
fetch('https://jsonplaceholder.typicode.com/posts/1').
then(response => response.json()).
then(json => {
console.log(json);
headline.innerHTML = json.title;
p.innerHTML = json.body;
addMark('aut facere');
});
}
function addMark(keyword) {
var markInstance = new Mark(document.querySelector('.context'));
var options = {
separateWordSearch: true
};
markInstance.unmark({
done: function() {
markInstance.mark(keyword, options);
},
});
}
<script src="https://cdn.jsdelivr.net/mark.js/8.6.0/mark.min.js"></script>
<div class="context">
<h1></h1>
<p></p>
</div>

JQuery: for condition is not able to complete due to .replaceWith manipulation

I am trying to get a line of JQuery script to read every paragraph string found in a div and split that paragraph every time there is a ','. My issues is that I am unable to POST all of the array at once, so the replaceWith function only outputs the first value of the array because the rest of the array is deleted when the for condition returns to increment to myArray[1].
Is there anyway for me to post every value in the 'array of splits' to separate html elements without leaving the initial string and/or turning every created element a child of the previous element?
DEMO
http://jsfiddle.net/ry25Q/
HTML
<div class="data">
<i>days_of_week</i>
<p>mon,tue,wed,thur,fri,sat,sun</p>
</div>
<div>
<input type="button" class="btnClick Button" value="Click" />
</div>
JS CODE
$(function () {
$('.btnClick').click(function () {
var data = $('.data p').text();
var splitter = data.split(',');
for (var i = 0; i < splitter.length; i++) {
$(".data p").replaceWith("<span class='dataseg'>" + splitter[i] + "</span>")
}
});
});

You don't need a loop. Since you're only replacing one p element, just call .replaceWith() once with the full HTML string you're inserting.
DEMO: http://jsfiddle.net/Vfk4e/
$(function () {
$('.btnClick').click(function () {
var p = $('.data p');
var splitter = p.text().split(',');
var open = "<span class='dataseg'>";
var close = "</span>"
p.replaceWith(open + splitter.join(close + open) + close)
});
});

Can't you just add $('.data p').text(''); before your for statement? This will clear the contents,t hen your .append from your fiddle will work just fine.
$(function () {
$('.btnClick').click(function () {
var data = $('.data p').text();
var splitter = data.split(',');
$('.data p').text('');
for (var i = 0; i < splitter.length; i++) {
$(".data p").append("<span class='dataseg'>" + splitter[i] + "</span>")
}
});
});

Try to create a variable for the span element you wish to replace the <p> element with. Then inside of your for loop, sequentially add your data to the span element. After the loop, close your span and then call replaceWith() with the span variable.
$(function () {
$('.btnClick').click(function () {
var data = $('.data p').text();
var splitter = data.split(',');
var daySpan = "<span class='dataseg'>";
for (var i = 0; i < splitter.length; i++) {
daySpan += splitter[i];
}
daySpan += "</span>";
$(".data p").replaceWith( daySpan );
});
});
Demo: http://codepen.io/imajedi4ever/pen/kpzCD/?editors=101

Uncaught ReferenceError in jQuery

When I click the button to insert bbcode to textarea The console alert : "Uncaught ReferenceError: myTextarea is not defined". Can you help me solve this problem ?
I have a code:
$(function(){
function formatText(el,tagstart,tagend){
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);// IE:Moz
var newText='['+tagstart+']'+selectedText+'[/'+tagend+']';
if(document.selection){//IE
el.focus();
var st=getCaret(el)+tagstart.length+2;
document.selection.createRange().text=newText;
var range=el.createTextRange();
range.collapse(true);
range.moveStart('character', st);
range.moveEnd('character',selectedText.length);
range.select();
el.focus();
}
else{//Moz
var st=el.selectionStart+tagstart.length+2;
var end=el.selectionEnd+tagstart.length+2;
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
el.focus();
el.setSelectionRange(st,end)
}
}
function getCaret(el) { // IE mission is tricky :)
el.focus();
var r = document.selection.createRange();
if (r == null) {
return 0;
}
var re = el.createTextRange(),
rc = re.duplicate();
re.moveToBookmark(r.getBookmark());
rc.setEndPoint('EndToStart', re);
var add_newlines = 0;
for (var i=0; i<rc.text.length; i++) {
if (rc.text.substr(i, 2) == '\r\n') {
add_newlines += 2;
i++;
}
}
return rc.text.length + add_newlines;
}
$("elements").after('<form action="/post" method="post" name="myForm"><textarea placeholder="Comments..." name="myTextarea"></textarea><span class = "repbbcode" title = "Bold" value="b" style="font-weight:bold" >B</span></form>');
$(".repbbcode").on("click" , function(){
formatText(myTextarea,'b','b');
});
});

$(".repbbcode").on("click" , function(){
formatText(myTextarea,'b','b');
^^^^^^^^^^
});
myTextarea is not defined. There is no
var myTextarea = ....
in your code. You need something like
$(".repbbcode").on("click" , function(){
var myTextarea = $("[name='myTextarea']).get(0);
formatText(myTextarea,'b','b');
});

You need to add var myTextarea = document.getElementsByName('myTextarea')[0];
$(".repbbcode").on("click" , function(){
var myTextarea = document.getElementsByName('myTextarea')[0]; // added myTextarea
formatText(myTextarea,'b','b');
});

In this line of code:
formatText(myTextarea,'b','b');
You have to pass as the first argument a DOM element. You can't just pass the name of a DOM element. It's easiest to use document.getElementById("myTextArea") and then set id="myTextArea" in your element.
So, your textarea HTML would be <textarea id="myTextArea" ...>.
And, your code would be:
var textareaElement = document.getElementById("myTextArea");
formatText(textareaElement,'b','b');
If you want to get the DOM element by name, you can do that too:
var textareaElement = document.getElementsByName("myTextArea")[0];
formatText(textareaElement,'b','b');
What is different here is that document.getElementsByName() returns a list of potentially multiple elements so you have to reach into that list with [0] to get the first item in the list to pass to your function.
There are many different ways to do this (using name, class, id, etc...). Usually if you are trying to get one unique element in a page, you would give it an id and use document.getElementById() or the jQuery equivalent.

Delete specific text from form when clicked

Basically I want to make a function that, when the text is clicked, it prints the 'id' on the form. and when it's clicked again, only that 'id' is deleted (prior clicked/printed 'id's remain).
The print script I have so far:
function imprime01(obj) {
document.form2.text.value = document.form2.text.value + obj.title;
}
the div
<div onclick="imprime01(this);" title="240 ">240</div>
<div onclick="imprime01(this);" title="230 ">230</div>
<div onclick="imprime01(this);" title="220 ">220</div>
So what I want is: when I click 240, 230 it prints "240 230" on the form, and when I click "240" again, it deletes only "240" from the form. Is there a way to achieve this?

There are many ways to do this.
I would store your ids in an array. In your click handler, test for the existence of the id in your array and remove it if it exists, otherwise add it. Then write all the ids in the array to your text box:
var idList = [];
function imprime01(obj) {
var id = obj.title;
var idIndex = idList.indexOf(id);
if (idIndex > -1) {
idList.splice(idIndex, 1);
}
else {
idList.push(id);
}
document.form2.text.value = idList.join(" ");
}
This may be a little more involved than a simple string replacement, but it gives you other functionality that could be useful later. For example, if another part of your program needs to know which ids have been selected, they are already available in an array.
Edit: Rather than storing the array in a variable, you could generate it on the fly in your click handler with string.split(" "):
function imprime01(obj) {
var id = obj.title;
var idList = document.form2.text.value.split(" ");
var idIndex = idList.indexOf(id);
if (idIndex > -1) {
idList.splice(idIndex, 1);
}
else {
idList.push(id);
}
document.form2.text.value = idList.join(" ");
}​
Working demo: http://jsfiddle.net/gilly3/qWRct/

See http://jsfiddle.net/BdEMx/
function imprime01(obj) {
var arr=document.form2.text.value?document.form2.text.value.split(' '):[];
var i=arr.indexOf(obj.title);
if(i===-1){
arr.push(obj.title);
}else{
arr.splice(i,1);
}
document.form2.text.value = arr.join(' ');
}
You shouldn't add a space at the end of title attributes only because you want to join some of them.

Use replace and indexOf functions:
var str = document.form2.text.value;
if(str.indexOf(obj.title) != -1)
document.form2.text.value = str.replace(obj.title,"");
else
document.form2.text.value = str + obj.title;

Select by next instance of class with jQuery

I'm looking to convert a function that selects by id to select the next instance of a given class.
Here is the code.
function swap3(oldDivId, newDivId) {
var oldDiv = document.getElementById(oldDivId);
var newDiv = document.getElementById(newDivId);
oldDiv.style.display = "none";
newDiv.style.display = "block";
}

Suppose you have this HTML:
<div id="test"></div>
<img>
<br>
<div></div>
<input>
<div class="abc">Found it</div>
<div class="cdf"></div>
Updated at 2021
The original answer is quite old now. Since the original question have the jQuery tag, the answer keeps valid and usable. But for those coming here with the hope to see an updated JavaScript code with no dependency on jQuery, take a look on how querySelector is a awesome nowadays:
const next = document.querySelector('#test ~ .abc')
next.textContent = 'Yeah, you found it!'
So the secret is to use the general sibling combinator that matches all iterations of the second element, but with querySelector that returns only the first match.
Original answer
So you select the first div by id:
var some = $("#test");
Then you want to find the next div with the class abc:
var next = some.nextAll("div.abc");
Suppose you want a variable as the className:
var x = "abc";
var next = some.nextAll("div." + x);

If I understand your question:
function nextItem(className) {
return $('#ID').closest('.' + className);
}
using closest: http://api.jquery.com/closest/

Select by ID in jQuery:
$('#class_name')
Select by class in jQuery:
$('.class_name')
Get the next item in jQuery:
$('.class_name').next('.class_name')
Using this, you can do something like
// Something to remember the current element
var currentElement = false;
function getNext(className)
{
// First time, there will be no current element
if (!currentElement)
{
currentElement = $('.' + className);
return currentElement;
}
// Other times...
currentElement = $(currentElement).next('.' + className);
return currentElement;