Regex find and replace specific element from string - javascript

I need some help
I have string from my innerHTML div
<div class="class-1">
<div class="class-1">
<div class="class-bla-bla class-find">Replace this div</div>
<div class="class-another">Hello World!</div>
</div>
<div class="class-2">
<div class="class-2 class-find">Replace this div</div>
<div class="class-no-replace">No replace</div>
</div>
<div class="class-somthing class-find">Replace this div</div>
</div>
and I want to use regex to find and replace all element with class name class-find and store the innerHTML string into database without change the actual HTML DOM, I tried to find the solution but I can not find any good answer for my case, please give me a favor to solve this out.
Note: I have found some sample regex https://www.regextester.com/93456, this only work if the element only have one class not multiple.

As regex is not meant to parse HTML. You can use the DOMParser API for the purpose.
let d = new DOMParser();
let s = `<div class="class-1">
<div class="class-1">
<div class="class-bla-bla class-find">Replace this div</div>
<div class="class-another">Hello World!</div>
</div>
<div class="class-2">
<div class="class-2 class-find">Replace this div</div>
<div class="class-no-replace">No replace</div>
</div>
<div class="class-somthing class-find">Replace this div</div>
</div>`;
let doc = d.parseFromString(s, 'text/html');
let divs = doc.querySelectorAll('.class-find');
let html = [];
divs = divs.forEach(e => {
html.push(e.innerHTML);
});
console.log(html);

Related

Javascript display inner html for a div with id

Is there any way to display all inner html content inside a div with plain javascript?
MyFiddle
<div id="parent">
<div id="child">
some-value
</div>
</div>
<div id="output">
</div>
I am trying to use outerhtml
var parent = document.getElementById("parent");
document.getElementById("output").innerHTML = parent.outerHtml;
You misspelled outerHTML (HTML in all capital). But to show HTML tags as well, use innerText instead
var parent = document.getElementById("parent");
document.getElementById("output").innerText = parent.outerHTML;
<div id="parent">
<div id="child">
some-value
</div>
</div>
<pre id="output"></pre>
Use innerText with outerHTML
var parent = document.getElementById("parent");
document.getElementById("output").innerText = parent.outerHTML;
#output {
white-space: pre;
}
<div id="parent">
<div id="child">
some-value
</div>
</div>
<div id="output"></div>
If you want to create everything from Javascript only. Look at this example.
var div = document.createElement("div");
var nodeDiv = document.createTextNode("Pay attention! This is new.");
div.appendChild(nodeDiv);
var element = document.getElementById("parent");
element.appendChild(div);
<div id="parent">
<div id="child">
some-value
</div>
</div>

Get an specific class field content from the same page (Javascript or PHP)

I would like to get the content of an specific div class in Javascript or PHP. I've found some possible solutions but no one worked for me. This is the code of the page:
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label"><label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div></div>
<div class="um-field-area">
<div class="um-field-value">text_to_be_retrieved</div>
</div></div>
The required content is the one containing "text_to_be_retrieved" but the code shall not be aware of the text "text_to_be_retrieved" (it has to retrieve the text just with the surrounding divs information). Is it possible to store it in a PHP/Javascript variable to be used by another algorithm?
Thanks in advance.
You can do it like this, store those values in object:
var obj = {};
var nick = $('.um-field-label label').attr('for');
var val = $('.um-field-label').next('.um-field-area').find('.um-field-value').text();
obj.nickName = nick;
obj.value = val;
alert(obj.nickName + " " + obj.value);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Use :contains selector to find elements that contains specified 'text'
If you have a variable holding the text wrapped in div, you can pass the variable in :contains
Try this:
var myText = 'adolfodominguez'; // Variable holding text value
var element = $('.um-field-value:contains("' + myText + '")')
console.log(element);
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-nickname um-field-text" data-key="nickname">
<div class="um-field-label">
<label for="nickname-27326">Professional Tag</label>
<div class="um-clear">
</div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
Your HTML, I appended an element to show you the output.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="um-field um-field-professional_tag um-field-text" data-key="professional_tag">
<div class="um-field-label">
<label for="professional_tag-27326">Professional Tag</label>
<div class="um-clear"></div>
</div>
<div class="um-field-area">
<div class="um-field-value">adolfodominguez</div>
</div>
</div>
<br>Copied text:
<p class='demo'></p>
Using the jQuery framework of Javascript, you will get the result you are looking for:
var text = $("[for='professional_tag-27326']").parent('.um-field-label').next('.um-field-area').children('.um-field-value').text();
$('.demo').text(text);
https://jsfiddle.net/73mtmLLv/5/

wrapAll() is creating double the divs?

I have a container div with two divs inside of it, like such:
<div class="container">
<div class="child1"></div>
<div class="child2"></div>
</div>
I have wrapped another div around 'child1' and 'child2' but it's appearing twice which I haven't been able to fix:
$(".child1, .child2").wrapAll('<div class="style"></div>');
Which is rendering out as the following:
<div class="container">
<div class="style">
<div class="style">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
</div>
But what I actually want is the following:
<div class="container">
<div class="style">
<div class="child1"></div>
<div class="child2"></div>
</div>
</div>
How do I go about fixing this? I have tried numerous other methods of trying to sort the double-append.
EDIT: The issue was jquery was firing twice, I moved the code out of the existing file and into a new file. Once I did this the answers below all worked.
Try:
$(".container > div").wrapAll('<div class="style"></div>');
Change you markup little bit, (just add common class)
<div class="container">
<div class="child1 child"></div>
<div class="child2 child"></div>
</div>
now use below code:
$( ".child" ).wrapAll( "<div class='style' />");
$(".child1").next().andSelf().wrapAll("<div class='style'/>");
Try it...
I ran this in fiddle and it seems to work fine... ??????
You can do this though...
$(".container").each(function() {
var ch1 = $(this).find('.child1');
var ch2 = $(this).find('.child2');
var st = $('<div class="style">');
st.append(ch1);
st.append(ch2);
$(this).html('').append(st);
});

Replace text with HTML value when included in DIV

I have div's:
<div class="message">
<div class="text-message">:D, :( Hello Wolrd!</div>
</div>
I want the result prints this:
<div class="message">
<div class="text-message">
<div class="smile-happy>":D</div>,
<div class="smile-sad">:(</div>
Hello Wolrd!
</div>
</div>
My JavaScript:
var smile1 = ':)';
var replace = smile1.replace(smile1,'<span class="smile-happy" title="Smile">'+smile1+'</span>');
$(".smile-happy:contains(':D')")){
$('.smile-happy').replaceWith(replace);
}
I really want to just replace the value of smiles **ex:** :D :( by a html with specific classes for each smile!
Various ways are there, simply you can try something like this
$('div.text-message').html(function(i,v){
return v.replace(':D','<div class="smile-happy">:D</div>')
.replace(':(','<div class="smile-sad">:(</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="message">
<div class="text-message">:D, :( Hello Wolrd!</div>
</div>

Get elements just 1 level below the current element by javascript

I need to access the DOM tree and get the elements just 1 level below the current element.
Read the following code:
<div id="node">
<div id="a">
<div id="aa">
<div id="ab">
<div id="aba"></div>
</div>
</div>
</div>
<div id="b">
<div id="ba">
<div id="bb">
<div id="bba"></div>
</div>
</div>
</div>
<div id="c">
<div id="ca">
<div id="cb">
<div id="cba"></div>
</div>
</div>
</div>
</div>
I want to get the 3 elements "a", "b", "c" under "node". What should I do?
var nodes = node.getElementsByTagName("div") <---- I get all the divs but not the 3 divs I need.
var nodes = node.childNodes; <---- works in IE, but FF contains Text Node
Does anyone know how to solve the problem?
You could use a function that rules out all non-element nodes:
function getChildNodes(node) {
var children = new Array();
for(var child in node.childNodes) {
if(node.childNodes[child].nodeType == 1) {
children.push(child);
}
}
return children;
}
I'd highly recommend you look at JQuery. The task you're looking to do is straightforward in pure Javascript, but if you're doing any additional DOM traversal, JQuery is going to save you countless hours of frustration. Not only that but it works across all browsers and has a very good "document ready" method.
Your problem solved with JQuery looks like:
$(document).ready(function() {
var children = $("#node").children();
});
It looks for any element with an id of "node" then returns its children. In this case, children is a JQuery collection that can be iterated over using a for loop. Additionally you could iterate over them using the each() command.
This is simplier than you think:
var nodes = node.querySelector("node > div");
Try this (late answer, but can be useful for others):
var list;
list=document.getElementById("node").querySelectorAll("#node>div");
Universal selectors can do the trick:
var subNodes = document.querySelectorAll("#node > *");
Query parts:
#node is unique container selector
> next slector should be applied only on childs
* universal selector that match every tag but not text
Can I use universal selector
In my opinion the easiest way to do this is to add a class name to the
first level child nodes:
<div id="node">
<div id="a" class="level_1">
<div id="aa">
<div id="ab">
<div id="aba"></div>
</div>
</div>
</div>
<div id="b" class="level_1">
<div id="ba">
<div id="bb">
<div id="bba"></div>
</div>
</div>
</div>
<div id="c" class="level_1">
<div id="ca">
<div id="cb">
<div id="cba"></div>
</div>
</div>
</div>
</div>
and then to use the method getElementsByClassName, so in this case:
document.getElementById('node').getElementsByClassName('level_1');
I think node.childNodes is the right place to start. You could (to make it work with FF too), test the nodeName (and possibly nodeType) of all child nodes you get, to skip text nodes.
Also you might have a look at some javascript library like prototype, which provide a lot of useful functions.
I've added some text so we can see that it is working, and JavaScript that will add "added!" to the bottom of each of the divs at the base:
var cDiv = document.querySelectorAll('body > div > div'), i;
for (i = 0; i < cDiv.length; i++)
{
cDiv[i].appendChild(document.createTextNode('added!'));
}
<div id="node">
<div id="a">a
<div id="aa">aa
<div id="ab">ab
<div id="aba">aba</div>
</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="bb">bb
<div id="bba">bba</div>
</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="cb">cb
<div id="cba">cba</div>
</div>
</div>
</div>
</div>

Categories