Display article from backend and style it with html - javascript

I have backend that is returning me whole article body text as String. On my website I want to create each article in different HTML/CSS style, for example have <br> tag to break article when it is too long. But some articles will not be long, so I can't place <br> tag inside my frontend component.
As my frontend component is not changing based on size of this text, I came up with an idea to store <br> tags directly inside article String texts. But data is coming as a string with <br> tags in it, the tags are treated also as a string, so it has no effect on styling.
Should I somehow escape these tags from string? Or is there a better way to do it? I don't have idea how it should be done properly.

If you are receiving raw html content that already has markup tags within it that you want to render in ReactJS, then you need to use React's dangerouslySetInnerHTML attribute. Depending on where you are holding the markup you received from the backend, your code somewhere within your Render function would look something like this:
<div dangerouslySetInnerHTML={this.state.recievedArticleRawText} />
see official documentation here for caveats and warnings on usage: https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
Essentially, the React team purposefully chose to name this dangerously because you should only use it if you 100% fully trust the value you are setting. Do not ever set values input by the user to this attribute because it leaves holes for all kinds of injection.

If you use innerHTML, then it should work correctly - given that you don't use < br >, as that's not a valid HTML entity (<br /> and <br> are).
const text1 = '1. This is a line< br >This should be the next line.'
const text2 = '2. This is a line<br>This should be the next line.'
const text3 = '3. This is a line<br />This should be the next line.'
document.getElementById('text1').innerHTML = text1 // expected to not work correctly
document.getElementById('text2').innerHTML = text2 // expected to work correctly
document.getElementById('text3').innerHTML = text3 // expected to work correctly
<span id="text1"></span>
<hr />
<span id="text2"></span>
<hr />
<span id="text3"></span>

Related

How to replace html tags with our own tags

In my MVC web application, I have a text area inside View, in that user will put HTML text so in that text, I want to replace html tags with my own custom tags.
For Example:
HTML tag:
<input type='text' name='MyList.First_Name' data-val='true' data-val-required='Please enter first name' />
Replace with:
[~TextFieldTag|MyList.First_Name|||0|data-val=>true|data-val-required=>Please enter first name|~]
Can anyone suggest what is the best approach to do this?
I was going to recommend a simple string replacement at first, but given the seemingly complicated nature of your replacements, that might not be the best approach.
Probably the best approach would be to take the HTML, convert it to DOM elements, which can be done simply by throwing it into an elements innerHTML:
document.querySelector('button').addEventListener('click', () => {
document.querySelector('#renderSpace').innerHTML = document.querySelector('textarea').value;
});
Add some HTML:
<textarea></textarea>
<button>Press Me</button>
<div id="renderSpace"></div>
You can position the area you render it inside of off-screen so users don't actually see it.
From there, I would walk the DOM tree (basically, start at the root, then look at all of its children, then their children, etc., recursively), reading off any properties that you deem appropriate and then writing your string replacement as you go along.
That does require that they have entered valid HTML (which is generally a requirement, but can be difficult to rely on users to enter), so you'll want to have some good, user-friendly, error handling in there.

Javascript to fill a formatted text field on a web site

I know virtually nothing about Javascript. By a monkey-see, monkey-do approach I’ve managed to successfully use Javascript within AppleScript/Safari to fill text fields on a web-site using the following command:
do JavaScript "document.getElementById('ElementID').value ='TextToEnter';" in document 1
I’ve been able to enter text into all fields except one. The fields that work are labeled as input type="text”. The field that doesn’t work is complex in that the entered text can be formatted (bold, italics, underline, alignment, etc.) after entry. Assuming I’ve identified the correct source code for this element it looks as follows PRIOR TO any text entry:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p><br data-mce-bogus="1"></p></body>
Depending on how its viewed, sometimes the p and br tags appear on separate lines but everything is otherwise identical.
After manual entry of text (“INSERT TEXT HERE”) directly into the web page's text field the source code becomes:
<body id="tinymce" class="mce-content-body " onload="window.parent.tinymce.get('fax_text').fire('load');" contenteditable="true" spellcheck="false"><p>INSERT TEXT HERE</p></body>
The following did not work (wrapped in Applescript):
document.getElementById('tinymce').value ='INSERT TEXT HERE';
It produces the error: "missing value".
As per #WhiteHat, the following with n= 0-4 inserted text at several spots on the page but not in the targeted text field; n > 4 resulted in the "missing value" error:
document.getElementsByTagName('p')[n].innerHTML ='Insert text here';
I tried targeting the br tag but to no avail. How do I target this text field with Javascript? Note: I do not need to format the entered text.
You need to access the <p> element, which is just after the body of the document, as such...
document.getElementsByTagName('P')[0].innerHTML = 'your text'
The getElementsByTagName function returns an array of all elements with the tag name you provide, P in this case. You're looking for the first one, hence the [0].
The innerHTML property will allow you to set the contents of the <p> element.
Following is a good JavaScript reference...
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
The following reference is for the web page, or Document Object Model (DOM).
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
And tinymce is a 3rd party JavaScript library which allows the rich edit functionality.
http://www.tinymce.com/
Based on the comments, the specific field you are looking for is named fax_text. Here is the source, it's in a textarea tag, take note on which function to use TagName vs. Name...
document.getElementsByName('fax_text')[0].value = 'This is my text!';
document.getElementsByTagName('textarea')[0].value =
document.getElementsByName('fax_text')[0].value +
'\nThis is additional text...';
<textarea rows="5" name="fax_text" cols="36" class="mytext"></textarea>
This text field is in an iFrame.
This iFrame contains an HTML document (<html><head><body>).
To get this document, you need the_iFrame.contentDocument.
do JavaScript "var ifr = document.getElementById('fax_text_ifr'); ifr.contentDocument.getElementsByTagName('p')[0].innerHTML = 'some text';" in document 1

How to replace text inside specific elements using javascript or any other qualified language?

I have this block of HTML(i don't want to change the code):
<section class="welcome-block-top">
<div class="inside">
<h2>Start a good life</h2>
<label>text to replace 1</label>
<a href="" class="link-a">
some text i do not want to replace</a>
</div>
</section>
i want to replace the text "text to replace 1"
i also want to replace text here:
<h3>
<span>
text to replace 2 </span>
</h3>
please teach me masters, i searched Google and stack-overflow and i dont seem to get something that works in my situation.
Something using the onload js method is preferable because the webpage is dynamically loaded.
if you know a better method to do this with any other language don't hesitate to inform me.
If there is a method to clear the text inside the elements and then insert new text i would be grateful.
You can use JQuery which can easily change the content of the tags.
oldContent = $("div.inside label:first").html();
$("div.inside label:first").html("put your desired content here");
meaining that find first label tag in the div tag having inside class and change its html content with the parameter.
EDIT:
You can of course save the old content and use it.
$("div.inside label:first").html(oldContent + " new content");
or
$("div.inside label:first").append(" new content");
It depends on your real use case but it might be this :
$('*:not(:has(*))').text(function(_,t){
return t.replace("text to replace 1", "replacement")
});
The main idea here is to apply a transformation to the text of all elements with no children (leafs in the DOM tree).
If you have more complex needs, or performance requirements, you might want to have a look at dedicated libraries, like mine : https://github.com/Canop/groumf

Replacing text with javascript?

After much trial an error and some progress I still can't mange to change every instance of ,- with kr on my website.
I'm very much a beginner at JS and have pieced together the following code from several sources. Is the code the problem or something else?
function skrivkr() {
var skrivkr = $('div').text().replace(/\,-/g, 'kr');
$('p').html(skrivkr);
}
window.onload = skrivkr();
Update:
Thanks for the replies. The site loads jquery 1.10.7.
#Niet the Dark Absol: No, I don't want to put anything in p elements. How do I remove that part? I just want to find all ,- and simply replace with kr without changing any formatting.
Update
OK! Progress, kind of. The ENTIRE content of every <strong> and <dd> now changes to (0), instead of kr. With the odd exception of those tags including ,-. I haven't designed the site myself.
If it helps, one of the ,- appears in the following markup:
<a href="xxxx" rel="nofollow">
<span class="amount">1</span>
<span class="photo">
<img src="xxxx" alt="product name" width="62" height="42">
</span>
<span class="description">
Prtoduct name
<strong>4444,-</strong>
</span>
</a>
And the lastest script I'm applying is:
$(document).ready(function() {
$('strong, dd').html($('strong, dd').html().replace(/,-/g, 'kr'));
});
As has been mentioned innumerable times here on SO, do not try to manipulate the DOM as a string. Pain awaits.
Instead, traverse the DOM, finding text nodes, and perform whatever transformation you want to make on each text node. There are many ways to do that.
In your case, you have many problems, as mentioned already by some of the commenters and responders:
You're setting window.onload to undefined (the result of calling skrivkr), instead of to skrivkr itself.
You're extracting the text value of an element, which consists of the concatenation of all text down all levels, performing the replacement, then sticking it back in with html. This will wipe out all the element structure below.
Minor point, but there's no need to escape the comma in the regexp.
You're extracting the textual content of all div elements in the entire document, transforming it, then adding that back as the content of all p elements in the entire document. It's hard to imagine that's what you want to do.
You can update the content of each div like this
$(document).ready(function() {
$('div').each(function(){
var newText = $(this).html().replace(/,-/g, 'kr');
$(this).html(newText);
});
});
You can remove the var "newText = " and replace it with $(this).html($(this).html().replace(/,-/g, 'kr'));
The first example is easier to understand perhaps if you are new to programming.
You will, however only change the content of text placed in tags.
I would place the text to replace in a div with some predefine class, like "autoKronor", it would then look like this:
<div class="autoKronor">123,-</div>
and
$(document).ready(function() {
$('.autoKronor').each(function(){
var newText = $(this).html().replace(/,-/g, 'kr');
$(this).html(newText);
});
});
to en sure that only text you intended to change gets changed..
Example here: http://jsfiddle.net/akm1uw8h/2/
Also note the use of $(document).ready(); instead of window.onload. It does what you intended to do with window.onload.
if you really want to change EVERY single instance of ",-" to "kr" then you could do this:
$(document).ready(function() {
$('body').html($('body').html().replace(/,-/g, 'kr'));
});
But i strongly advice against the last example because it will be the slowest to compute and more importantly you might change stuff you don't intend to, like any script block inside the page body (with that i mean other javascripts)

HTML within Javascript Function Not Working Properly

I am using the following JavaScript function:
function Projects()
{
var PrjTb1 = "<input type=text id=PrjNme size=100/>"
var PrjTb2 = "<textarea rows=5 col=200 wrap=hard></textarea>"
var Info = "1. Project or activity name:<br>" + PrjTb1 + "<br><br>2. Project or activity description:<br>" + PrjTb2
if (document.getElementById('PrjNo').value == 1)
{
document.getElementById('AllPrj').innerHTML = "<b>Project or activity 1.</b><br><br>" + Info
}
}
This function executes well, after an onclick event; however, certain portions of the HTML within the declared variables are not working. For example, within the variable PrjTb2, my textarea's rows and columns do not change. Also, I cannot add the HTML tags <dd> and </dd> anywhere within the variables to create an indentation. What is interesting is that both the textarea properties and the HTML tags, <dd> and </dd>, work within the body of my form, just not in my JS function. Would anyone know what I am doing wrong.
Not sure if its the problem, but I'd enclose all your parameters in quotes.
<input type=text id=PrjNme size=100/>
should really be:
<input type='text' id='PrjNme' size='100' />
additionally, depending on your Doctype, you may want to change
<br>
to
<br />
Things that are allowed in direct HTML are not necessarily allowed using innerHTML. For example, in Firefox, try embedding a form within a form in JS vs html, or in IE, try putting a block element inside an inline element. They both work fine, if you have it in HTML, but if you try it with innerHTML, both browsers will complain.
It could be that your browser is caching your Javascript. Try clearing your cache.
I don't know if your syntax error are due to copying you code here, but here is a couple of things I noticed in your code.
Are you omitting semi-columns at the end of you lines on purpose?
HTML proprieties should be surrounded by quotation marks. (Although not necessary)
Also regarding the <dd></dd>, did you put those inside a definition list (dl)?
Because they shouldn't be used as standalone tags.

Categories