a simple question here
Is there a way to change the text "click here"
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
in this link
Richard
You have to use the jquery's text() function. What it does is:
Get the combined text contents of all
matched elements.
The result is a
string that contains the combined text
contents of all matched elements. This
method works on both HTML and XML
documents. Cannot be used on input
elements. For input field text use the
val attribute.
For example:
Find the text in the first paragraph
(stripping out the html), then set the
html of the last paragraph to show it
is just text (the bold is gone).
var str = $("p:first").text();
$("p:last").html(str);
Test Paragraph.
Test Paragraph.
With your markup you have to do:
$('a#a_tbnotesverbergen').text('new text');
and it will result in
<a id="a_tbnotesverbergen" href="#nothing">new text</a>
The method you are looking for is jQuery's .text() and you can used it in the following fashion:
$('#a_tbnotesverbergen').text('text here');
$('#a_tbnotesverbergen').text('My New Link Text');
OR
$('#a_tbnotesverbergen').html('My New Link Text or HTML');
You need J-query library to do this simply:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
First you need to put your element in div like this:
<div id="divClickHere">
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
</div>
Then you should write this J-Query Code:
<script type="text/javascript">
$(document).ready(function(){
$("#a_tbnotesverbergen").click(function(){
$("#divClickHere a").text('Your new text');
});
});
</script>
I found this to be the simplest piece of code for getting the job done. As you can see it is super simple.
for
original link text
I use:
$("#sec1").text(Sector1);
where
Sector1 = 'my new link text';
From W3 Schools HTML DOM Changes: If you look at the 3rd example it shows how you can change the text in your link, "click here".
Example:
<a id="a_tbnotesverbergen" href="#nothing">click here</a>
JS:
var element=document.getElementById("a_tbnotesverbergen");
element.innerHTML="New Text";
try this in javascript
document.getElementById("22IdMObileFull").text ="itsClicked"
Related
I use highlight.js this way:
<div class="ex1" contenteditable="true">
<pre>
<code id="script_code" class="pgsql"></code>
</pre>
</div>
User can edit the code. When user wants to save changes I need to get plain text.
When I get it:
var pscriptText = document.getElementById(divCodeView).innerHTML;
I see the tags. How to get the plain text?
Use textContent instead of innerHTML:
var pscriptText = document.getElementById(divCodeView).textContent;
In an Html file that I have, there is a paragraph tag that basically looks like this:
<p class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</p>
The contents of this paragraph are grabbed from a textarea that a user fills out and the value of this textarea is grabbed via jquery and filled into this element.
The output looks like this: Hey What's Up
This paragraph tag ignores the newlines within the paragraph, so the paragraph displays all on one line. Due to the format and layout of the project, I can't necessarily change the html source. I was wondering if there was a way to change this exact element to be:
<pre class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</pre>
using only javascript. Is this possible? This is so my output will keep the newlines.
I think you are looking for something like this. you tagged jquery so I used that but this could be done in vanilla js too.
I linked to a onkeyup event if you wanted to change to use the button only if you wanted
$(document).ready(function(){
function updateContent() {
$('#p1').html($('#source').val());
}
$('#update').on('click', function(e){
updateContent();
// add other stuff here
// for only the click event
})
$('#source').on('keyup', updateContent);
})
button {
display:block;
}
#source {
height:100px;
}
#p1{
white-space:pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="source" placeholder="Update content and click 'update'">new content
add line breaks and <p>html markup</p>
</textarea>
<button id="update" >Update</button>
<p id="p1">THIS WILL CHANGE!</p>
It is very simple and has been asked before... BUT here it is, using DOM:
document.getElementById("p1").innerHTML = "<p>This</p><p>Has</p><p>Changed!</p>";
<p id="p1">THIS WILL CHANGE!</p>
So your piece of code you need is:
document.getElementById("p1").innerHTML = "New text!";
EDIT
This is simpler, easier and more browser friendly than using <pre> tags. Therefore, I would highly recommend you to use this instead.
Can someone tell me how to preserve the url in this replace? when i run this code it finds and replaces the text but removes the link text and just has the word text. I need to preserve the link and this is just a simple example. The actually code I need to work with a a dynamic link so I can just manually replace it.
$(".text_div").text(function () {
return $(this).text().replace("contains", "hello everyone");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text_div">
This div contains some text.
</div>
this give's me
This div hello everyone text.
Use .html() instead of .text():
$(".text_div").html(function() {
return $(this).html().replace("contains", "hello everyone");
})
$(".text_div").html(function() {
return $(this).html().replace("contains", "hello everyone");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text_div">
This div contains some text.
</div>
Instead of using $(this).text(), you should be doing $(this).html().
I have a div with an inner HTML which looks a lot like:
<b>First <span class="red">se</span></b><span class="red">cond third fo</span>urth fift<span class="large">h sixth</span>
This markup can contain any text formatting tags since it is the output of a text-editing library.
For something I am working on, I need to remove any nesting that exists. So, ideally, the above markup string should become:
<span style="font-weight:bold">First</span> <span style="font-weight:bold;color:red">se</span><span style="font-weight:bold">cond third fo</span><span>urth fift</span><span style="font-size:20px;">h sixth</span>
To give some context, the markup at the top is the output of Wysihtml5 text editor which is pretty useful but I need the markup to be similar to the second one to be able
Try this:
$(document).ready(function(){
$('b').each(function(){
var text = $(this).html();
$(this).replaceWith('<span style="font-weight:bold;color:red">' + text + '</span>');
});
});
Fiddle: http://jsfiddle.net/uQyL3/1/
I have the following html
<img src="a.jpg" /><p> This is some random text and just to test this example. This is some random text and just to test this example. This is some random text and just to test this example<p>
<br><p>This is some random text and just to test this example This is some random text and just to test this example</p>
<img src="a.jpg" />
<br><p>This is some random text and just to test this example This is some random text and just to test this example</p>
My question is that if i have to give a preview of the text only using jquery suppose i have this in a variable named html how to display only few parts of the text ignoring the images
<div id="preview"></div>
$("#preview").val("//display only text in the variable named html")
You could filter images from the html:
var someHtml = '....';
$('#preview').html($(someHtml).filter(':not("img")'));
$('#preview').html(textWithTags.replace(/(<([^>]+)>)/ig,"").substr(0, 200));
Note: use .text() or .html() instead of .val() for DIV.
try this:
Here `.content` is class of wrapper of whole html you post
CODE:
$('.preview').click(function(){ // Here `.preview` is the `class` of submit button
html = $('.content').contents(':not(img)');
$('#preview').html(html)
});
OR
$('#preview').html($(yourhtml).not('img'));
OR
html = $('.content').html();
yourhtml = $(html).contents(":not('img')").text().substr(0, 200).concat('...'); // here I add `concat('...')` just for continuity. you may remove it,
$('#preview').html(yourhtml);