javascript - Remove a character from the middle of a string: without removing inner element - Stack Overflow

admin管理员组

文章数量:1287607

This one has me stumped. I want to remove the "+" from a label element. Here's the HTML:

 <label class="option" for="edit-attributes-21-33">
 <input type="radio" id="edit-attributes-21-33" name="attributes[21]" 
 value="33" checked="checked" class="form-radio"> 4 oz, +$15.00</label>

I started with this

$(".option").each(function(index, value) {

$(this).text( $(this).text().replace("+", ""));

})

This removes the "+" but also strips out the input element. So then I tried:

$(".option").each(function(index, value) {

var oldString = $(this).html();
var newString = oldString.replace("+", "");
console.log(oldString, newString);
$(this).text(newString);

})

This makes a string of the correct html mark-up, but it's a string and is passed back to the DOM that way. I've seen another post with the same problem, but no solution.

This one has me stumped. I want to remove the "+" from a label element. Here's the HTML:

 <label class="option" for="edit-attributes-21-33">
 <input type="radio" id="edit-attributes-21-33" name="attributes[21]" 
 value="33" checked="checked" class="form-radio"> 4 oz, +$15.00</label>

I started with this

$(".option").each(function(index, value) {

$(this).text( $(this).text().replace("+", ""));

})

This removes the "+" but also strips out the input element. So then I tried:

$(".option").each(function(index, value) {

var oldString = $(this).html();
var newString = oldString.replace("+", "");
console.log(oldString, newString);
$(this).text(newString);

})

This makes a string of the correct html mark-up, but it's a string and is passed back to the DOM that way. I've seen another post with the same problem, but no solution.

• javascript
• jquery
• html
• string

Share Improve this question Follow asked Apr 15, 2015 at 19:29 iciclekingicicleking 1,07711 gold badge1515 silver badges4141 bronze badges 2

• Related but not quite duplicate: stackoverflow./questions/4106809/… – James Montagne Commented Apr 15, 2015 at 19:59
• I am not sure what you mean by the input element is stripped out? Give an example of what it is originally, what it bees after the current code, and what you would like it to do. EX: Original: Abc + 123 + 456 should be Abc 123 + 456 but this code returns Abc 123 456 – Addo Solutions Commented May 14, 2015 at 13:55

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

You can achieve what you want using your code by using .html() instead of .text():

$(".option").each(function(index, value) {
    var oldString = $(this).html();
    var newString = oldString.replace("+", "");
    console.log(oldString, newString);
    $(this).html(newString);
});

Here's the JQuery .html() method ref: https://api.jquery./html/

Here's the Fiddle: https://jsfiddle/Darkseal/1c572Luw/

I also slightly modified your <input> end tag to make it XHTML pliant.

What you're looking for is called a textNode. I gave your label an ID to make it easier, but the priciple remains the same for other selectors:

var node = document.getElementById("example").childNodes[2];
node.nodeValue = node.nodeValue.replace("+", "");

With a simple demo.
You should try to use plain JS as much as you can in favour in jQuery. Plain JS is often a lot faster than jQuery is.

After the ment, if you don't know the exact position of the textnode, check this.

Late answer, just for the sake of showing a different approach using jQuery.

Here you would keep the input state, and wouldn't have the risk of replacing chars that you don't want to. Let's say you used + somewhere else, not just on the label text.

$(function () {
    $('label.option').each(function () {
        var label = $(this);
        var input = $('input.form-radio', this);
        var text = label.text();

        // Clean up the label contents.
        label.empty();        

        // Replace the char occurrences.
        text = text.replace(/\+/g, "");

        // Append both the input and the modified text.
        label.append(input).append(text);        
    });
});

Demo

本文标签： javascriptRemove a character from the middle of a string without removing inner elementStack Overflow