Develop Reference

How to make InnerHTML to work as innerText?

I am currently working on a google chrome extension and I want to highlight the searched word.
I am highlighting by finding the match in innerHTML and adding "mark" tag around it. The problem is that when I do this if the searched word was used as a function name or tag name inside the HTML code also gets highlighted.
I want the innerHTML to work as innerText so that I could add tag around the matched word and the matched word won't be any elements of HTML code.
Can someone help me out in figuring this problem out, please?
I have this code so far:
var match = new RegExp(request + "(?![^<>]*>)", "gi");
document.documentElement.innerHTML = document.documentElement.innerHTML.replace(match, function (match) {
return ("<mark style='background-color: #FFFF99;'>" + match + "</mark>");
});

Javascript : Replace Detect a string and replace html in a div after changing color

I am trying to change color of a part of strings. I have a list of DOM elements, and for each of them, the text can contain some hashtags. I would like to put in color all hashtags words which could be found in the text.
Here is the begin of the code :
var listOfText = document.getElementsByClassName("titleTweet");
for (var nodetext in listOfText) {
var divContent = listOfText[nodetext].innerHTML;
if (divContent.indexOf("#") !== -1) {
// Do job here
}
}
For example, divContent can be equals to "Hello my #friends ! How are you ?"
I would like to update the dom elements to put in red color the word "#friends".
I don't know how to do that using javascript or jQuery.

You can use a regexp to find the hastags and wrap them with html. Then use the .html() method to replace the original element's html with the new string.
Example snippet
$('#myDiv').replace(/#[a-z0-1A-Z]+/g, '<span style="color: red;">$&</span>'));
Working example - http://jsfiddle.net/4p4mA/1/
Edited the example to work on all divs on the page.
Note: This will only work so long as your element only contains text, because it is replacing all the child nodes with its text value.

use regex for this, find text having hashtag and replave that in span tag for each element.
$('.titleTweet').each(function(){
var $this=$(this);
$this.html($this.text()
.replace(/#[a-z0-1A-Z]+/g, '<span style="color: red;">$&</span>'));
});
See demo here

.innerHTML is a poor basis to starting replacing text. You'll want to navigate down to the text nodes and use .nodeValue to get the text. Then you can start splitting up the text nodes.

Slice first character from paragraph element, replace content and add class. jQuery

I am close to getting this function working, but not quite there yet.
The basic logic says find any p element that contains "+", strip the "+" from the text and try and replace the existing content with the new content and add a class.
Initially I had all of the matched elements being returned and concatenated into a single paragraph. So I tried to create an each function. I am now seeing the right results in the console, but I am not sure how to replace the content for the matched paragraph only (using $(this)).
I've made a fiddle here: http://jsfiddle.net/lharby/x4NRv/
Code below:
// remove bespoke text and add class
$qmarkText = $('.post p:contains("+")').each(function() {
$qStr = $(this).text().slice(1);
$qmarkText.replaceWith('<p class="subhead-tumblr"' + $qStr + '</p>');
console.log($qStr);
});
I know that $qmarkText is not quite but not sure how to fix this, have tried several variations.
Hopefully someone can help me out.

You could use following snippet:
// remove bespoke text and add class
$qmarkText = $('p').filter(function () {
return $(this).text().substring(0, 1) === "+"
}).each(function () {
$qStr = $(this).text().slice(1);
$(this).replaceWith('<p class="subhead-tumblr">' + $qStr + '</p>');
});
DEMO
This avoid using :contains() which will match even character '+' is inside content text, not only at the beginning.

How to find the selection text beginning and end positions in Javascript?

I am trying to find the textual start and end of the selection. So, in the following text, if I selected "world! What a fine" from within "Hello, world! What a fine day it is!", I should get 7 as the start coordinate, and 24 as the end coordinate assuming a zero based index.
How is this achievable?
EDIT:
I am looking to find the selection of text that is not inside any <input> or <textarea> elements.
EDIT:
Decided the solution to use disabled <textarea>s

I use this:
/* Returns 3 strings, the part before the selection, the part after the selection and the selected part */
function getSelected()
{
var u = editor.val();
var start = editor.get(0).selectionStart;
var end = editor.get(0).selectionEnd;
return [u.substring(0, start), u.substring(end), u.substring(start, end)];
}
where editor is $("#editor") or whatever ID your textarea / input field may have.
Usage:
var select = getSelected()
editor.val(select[0] + '<h1>'+ select[2] + '</h1>' + select[1]);
Will wrap selected text in H1. If nothing is selected it will just add empty H1, but you can add checks and functionality to your liking.
** Not tested in all browsers, works in Chrome though **

This is possible but slightly complicated with contenteditable HTML content (as opposed to text within an <input> or <textarea> element). Here's a simple cross-browser implementation:
https://stackoverflow.com/a/4812022/96100

But I know a jQuery plugin that aims your problem and much more - https://github.com/localhost/jquery-fieldselection

Get specified texts in a div, than search for them in a different div

I am trying to get texts from a div, than i want to search for these titles on the same page, but in a different div. And if one of the title exist there, i want to put some text after it. I tried to do it, but i don't know what is the problem. Last time i tried it with this jquery code:
var cim = $.trim($('.hirblokk span.comments:contains("új")').parent(".hirblokk").children("h3").text());
jQuery.each(cim, function(X) {
$("ul.s_hir.show li.hir a:contains(X)").find("small").append(" (Új!)");
return (this == cim.length);
});
As you can see i put the texts what i wanted to 'cim'(it is working). Than i tried (line 3) to check if one of the 'ul.s_hir.show li.hir a' contains one of the text, and if it containes, i put (append) something in the small tag (there is a small tag inside a tag : Text..)(this is not working). I tried it in more ways, but none of them worked.
If i write:
$("ul.s_hir.show li.hir a:contains(a)").find("small").append(" (Új!)");
than it will put ' (Új)' after every small tag when the a contains a character. So it looks like the problem is how i want to check if it a contains one of the text.
Oh, and i can get more than whan text for example: 'I am new' and 'Oh, hello darling' and only one of them contains *ul.s_hir.show li.hir a*

I'm not sure I have fully understood what text you want to search, but I see several problems:
your cim var is a single string: as jQuery docs explains, the result of the .text() method is a string containing the combined text of all matched elements http://api.jquery.com/text/ . So if you have multiple elements matched with your selector, cim will be a string of all text concatenated.
jQuery.each() iterate on each character of cim, and X is the index of the character in the string, not the value
in your third line, X is not evaluated as a var because it's in double quotes.
I don't understand what you're expecing with return (this == cim.length) : you're comparing a number (cim.length) with a string (the value of each currently evaluated).
Try something like this:
// titles contain all the h3 elements you're searching
var titles = $('.hirblokk span.comments:contains("új")').parent(".hirblokk").children("h3"));
// you're iterating on each title
jQuery.each(titles, function(index,title) {
// you're searching links elements containing each title text
var text = $.trim($(title).text());
$("ul.s_hir.show li.hir a:contains("+text+")").find("small").append(" (Új!)");
});