Delete Span Tag Along With Text in HTML Permanently

jQuery permanently change value of DIV/Span

Yes you can, but you will need to do a lot more work. Firstly, you need to be able to submit the changed value back to the server, using a JQuery AJAX post.

http://api.jquery.com/jquery.post/

Try something along these lines...

  $.post( "url of your server side method",
{ value: $("#hiddenVal").val() } );

This will require some server side code that is able to handle the post from the javascript in your web page. Within this server side code you will need to save the updated value somewhere, typically in a database .

Finally, you need to build up your page on each request from the updated value from the database.

Essentially, what I have described is a dynamically data driven website. Most significant website project templates for Visual Studio have examples of how to do this. If you are not using the .NET stack, I am sure that whatever technology that you are using will have similar examples.

Also, you wouldn't need to store the hidden value...

$("#add").click( function() {
var counter = parseInt($("#hiddenVal").val());
counter++;
$("#hiddenVal").val(counter);
$("#theCount").text(counter);
});

becomes

$("#add").click( function() {
$("#theCount").text(parseInt($("#theCount").text())++);
$.post( "url of your server side method",
{ value: $("#theCount").text() } );
});

Good luck

Strip HTML from Text JavaScript

If you're running in a browser, then the easiest way is just to let the browser do it for you...

function stripHtml(html)
{
let tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}

Note: as folks have noted in the comments, this is best avoided if you don't control the source of the HTML (for example, don't run this on anything that could've come from user input). For those scenarios, you can still let the browser do the work for you - see Saba's answer on using the now widely-available DOMParser.

JQuery change inner text but preserve html

This seems to work just fine.

Live Demo

<html>
<head>
</head>
<body>
<a href="link.html">Some text <img src="img.jpg" /></a>
</body>

</html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $link = $('a');
var $img = $link.find('img');
$link.html('New Text');
$link.append($img);
});
</script>

Is it bad to put <span /> tags inside <option /> tags, only for string manipulation not styling?

From the HTML 5spec:

Content model:

  • If the element has a label attribute and a value attribute: Nothing.
  • If the element has a label attribute but no value attribute: Text.
  • If the element has no label attribute and is not a child of a datalist element: Text that is not inter-element whitespace.
  • If the element has no label attribute and is a child of a datalist element: Text.

So depending on context there are two things that you can put inside an <option> — text or nothing at all — you may not put a <span> or any other element there.


From the HTML 4.01 spec:

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->

(Even the HTML 3.2 and HTML 2 specs say: <!ELEMENT OPTION - O (#PCDATA)*>)


An option element cannot have any child elements. So yes, it is bad.

Read all text between non-sibling HTML tags

You could try walking the entire DOM, recursively, and exclude elements based on prior start and end markers found:

As a simple example (if I understand your exclusion logic correctly):

JSFiddle: http://jsfiddle.net/fdductdg/2/

function walkDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
walkDOM(node, func);
node = node.nextSibling;
}
};

var inMarker = false;

walkDOM(document.body, function (node) {
var $node = $(node);
if ($node.is('span')) {
if ($node.hasClass('marker-end')) {
inMarker = false;
console.log("end marker");
} else if ($node.hasClass("marker-start")) {
inMarker = true;
console.log("start marker");
}
}
if (node.nodeType == 3)
{
if (!inMarker)
{
// Not inside a marker, remove the text content
node.textContent = "";
}
}
});

Update:

As you also wish to retain the original text, you can either collect it in a variable (as you appear to have done in comment) or wrap any matching text nodes in appropriate elements (e.g. a span with appropriate class) so that the excluded text can simply be styled-in/out, without destroying the content.

Keep a line of text as a single line - wrap the whole line or none at all

You can use white-space: nowrap; to define this behaviour:

// HTML:

.nowrap {  white-space: nowrap ;}
<p>      <span class="nowrap">How do I wrap this line of text</span>      <span class="nowrap">- asked by Peter 2 days ago</span>    </p>

How can I use BeautifulSoup to wrap a span over a word?

I've done something like this, where the variable html is your code <html><body>word-one word-two word-one</body></html> and I separated the text and the code then added them together.

soup = BeautifulSoup(html,'html.parser')
text = soup.text # Only the text from the soup

soup.body.clear() #Clear the text between the body tags

new_text = text.split() # Split beacuse of the spaces much easier

for i in new_text:
new_tag = soup.new_tag('span') #Create a new tag
new_tag.append(i) #Append i to it (from the list that's split between spaces)
#example new_tag('a') when we append 'word' to it it will look like <a>word</a>
soup.body.append(new_tag) #Append the whole tag e.g. <span>one-word</span)

We could also do this with Regular Expressions to match some word.

soup = BeautifulSoup(html, 'html.parser')
text = soup.text # Only the text from the soup

soup.body.clear() # Clear the text between the body tags

theword = re.search(r'\w+', text) # Match any word in text
begining, end = theword.start(), theword.end()

soup.body.append(text[:begining]) # We add the text before the match

new_tag = soup.new_tag('span') # Create a new tag

new_tag.append(text[begining:end])
# We add the word that we matched in between the new tag
soup.body.append(new_tag) # We append the whole text including the tag
soup.body.append(text[end:]) # Append everything that's left

I'm sure we could use .insert in a similar manner.



Related Topics



Leave a reply



Submit