I want to replace a word with hyperlink on every post. So i used this code.
document.body.innerHTML = document.body.innerHTML.replace('Ronaldo', 'Ronaldo');
This code is working properly but the issue is, it's also replacing Ronaldo in title and in heading. I don't want that. I want that code to only replace words in post-body and not on post-title or <h> tags
I'm tagging jquery and ajax because they too know javascript.
You are selecting whole body with : document.body;
when you can just select the specific one by using: document.getElementById("yourId");
and replaces it's Ronaldo.
Related
I'm looking for a way to look for a specific string within a page in the visible text and then wrap that string in <em> tags. I have tried used HTML Agility Pack and had some success with a Regex.Replace but if the string is included within a url it also gets replaced which I do not want, if it's within an image name, it gets replaced and this obviously breaks the link or image url.
An example attempt:
var markup = Encoding.UTF8.GetString(buffer);
var replaced = Regex.Replace(markup, "product-xs", " <em>product</em>-xs", RegexOptions.IgnoreCase);
var output = Encoding.UTF8.GetBytes(replaced);
_stream.Write(output, 0, output.Length);
This does not work as it would replace a <a href="product/product-xs"> with <a href="product/<em>product</em>-xs"> - which I don't want.
The string is coming from a text string value within a CMS so the user can't wrap the words there and ideally, I want to catch all instances of the word that are already published.
Ideally I would want to exclude <title> tags, <img> tags and <a> tags, everything else should get the wrapped tag.
Before I used the HTML Agility Pack, a fellow front end dev tried it with JavaScript but that had an unexpected impact on dropdown menus.
If you need any more info, just ask.
You can use HTML Agility Pack to select only the text nodes (i.e. the text that exists between any two tags) with a bit of XPath and modify them like this.
Looking only in body will exclude <title>, <meta> etc. The not excludes script tags, you can exclude others in the same way (or check the parent node in the loop).
foreach (HtmlNode node in htmlDoc.DocumentNode.SelectNodes("//body//*[not(self::script)]/text()"))
{
var newNode = htmlDoc.CreateTextNode(node.InnerText.Replace("product-xs", "<em>product</em>-xs"));
node.ParentNode.ReplaceChild(newNode, node);
}
I've used a simple replace, regex will work fine too, prob best to check the performance of each approach and choose which works best for your use case.
I have a used case, where I have multiple text-areas on page. And unfortunately the name and id for these textareas are same. Actually it is tabbed section on the page.
I need to apply ckeditor to particular tab section, and not all.
CKEDITOR.replace('textarea');
replaces only the first textarea. However, I want to skip first and replace second or for another context I want to skip second and replace third and first textareas of same name.
Any idea?
All html elements are stored in an index . Try the following jquery funtion .eq() to grab a specific textarea .
Example .
var textArea1 = $("textarea");
then replace a specific textarea at any index in the dom..
// FYI grabing the 2nd <textarea> element on the page...
CKEDITOR.replace(textArea1.eq(1))
WORKING EXAMPLE HERE: http://codepen.io/theConstructor/pen/pyRXYa
Well I tried something like this.
Each tabbed section has its own id or whaterver,
$('textarea.ckeditor').each(function() {
CKEDITOR.replace(this);
});
And this worked fine for me!
I'm writing a user script in Greasemonkey and I am currently adding elements to a text box. I have tried unsuccessfully to use inline CSS within the created element like so
CSS
.append($("<p style="color:blue">"))
Is this even possible to do with jQuery? I couldn't find any examples of this searching around and I'm still really new to coding, so I apologize if this has been answered before.
Supposing you want to append a inline-styled <p> tag to a <div> tag you have to use:
var parentNode = $('div');
var childNode = $('<p>');
childNode.css('color', 'blue');
parentNode.append(node);
The last post asking really well to question but your first approach works also (you just forget the '/' at the end).
Supposing you want just adding a simple "p" empty element, you can just do this (with Jquery):
$(element).append('<p style="color:red" />')
or if you want to add a p no empty element do this :
$(element).append('<p style="color:red" > My text </p>')
It's the shortest way to do that but the last post show a more cleaning technic to do that.
I have a string coming from my java backend which is formatted to display in a certain way, the new line, tab and space characters are in certain positions.
How do I get this to display the same way in HTML?
For example, say I have the current string in Javascript as so:
var str = "\t\tTitle \n Some text \t\t\t more text";
Browsers typically strip out extra white space, you might need to put it inside a preformatted text block or use white-space: pre
var pre = document.createElement("pre");
pre.innerHTML = str;
document.appendChild(pre);
Also yes, you need to use backslahes too, as mentioned about.
I might be late but just in order to help if a beginner like me is facing this kind of problem.
You can add a css class to the html tag where you want to display the data. In my case I am using ngFor of Angular 2. The data coming from my back end had line breaks and tabs. So I just added a class to the html tag with a css white-spacing style as follows.
Backend Data"title": "postIssueResponse() {\n\tthis.parent.postIssueResponse(this.issueId, this.newResponse);\n console.log(this.newResponse);\n this.newResponse \u003d \"\";\n}"
<p class="response-title">{{myData?.title}}</p>
And the css
.response-title {
white-space:pre;
}
This one do the job perfectly.
You can use textarea also. here is a Working Fiddle
MDN textarea
What I am trying to do is to create a front-end editable tagbox (editable div). Whenever a user types a word into that box and presses , this box will change that word into a colorful label. The problem I am having is:
User types the first word in, presses the comma key.
The word is then wrapped in <a> tags.
User types the second word in, presses the comma key.
Now I have to leave the first wrapped word as it is and take only the second word into consideration to wrap it into an <a> tag as well. It's extremely tricky to me, I have no idea how to leave the first <a> tag alone and select "free" words for wrapping. This also means wrapping more than one word into a single <a> tag whenever the user decides to put a two-word tag. It has to work with any number of tags.
Could you please point me in the right direction? I am trying to solve this with jQuery. I don't necessarily need the code itself, because I know how to write it, I just need to come up with the right algorithm in my brain.
Alright, as requested :)
Depending on whether you keep the commas in the field after replacing or not, split the inner HTML of the editable content by comma and/or .
Try following
function wrapInLink(container){
var link_text = $(container).text().split(',').slice(-1).pop(); // finding the string for replacing with anghor tag
var html = $(container).html(); // getting the container html
html = html.replace(link_text, "<a href='link_to_be_given'>" + link_text + "</a>"); // replacing the link text with anchor tag
$(container).html(html); // replacing the container's html
}