I want to replace all characters in a specific class with another character using JavaScript
JavaScript is just a beginner and may be a basic question ...

Source code
<p>apple and orange and banana</p>
<p>apple and orange and banana</p>

This is a script (Tempermonky) only

<p>Apple, Orange and Banana</p>
<p>apple and orange and banana</p>

I want to do that.

I just started JS and I don't know anything.
I don't even know what order (what is the official name?)

  • Answer # 1

    If you search for "replace", you will get various things.
    String.prototype.replace ()

  • Answer # 2

    It's not limited to JavaScript, but it's just a string from the programming language
    I think I have to have a "conversion dictionary" somewhere (for example, by an array) and replace the corresponding information.

    There is basically no concept of "word" except for the function of programming language.

    apple is just a collection of the letters [a] [p] [p] [l] [e]
    An apple is just a collection of the letters [ri] [n] [go].

    You can also define variables and functions yourself, but that's just a collection of strings, so
    Even if a combination is not found in an existing word, the programming language will only interpret it as "defined by that name".

    As presented now
    apple and orange and banana
    It may be easy to understand if it is separated by words and phrases (because it can be converted into words separated by spaces)
    What would you do if you were connected likeappleandorangeandbanana?
    apple and orange and bana- na
    What to do if there is a line break in the middle of a word like
    [and] also changes to various meanings depending on the context (like "~~~ and")

    I think there are a lot ofrequirements that must be met before thinking about implementation.

    Make sure that everything is properly packed, and then enter the string operation instead of the DOM operation.
    I think that the replacement process, especially the replacement process with regular expressions, will be necessary this time.

  • Answer # 3

    I think that the replacement will not work if there are multiple matches, but you can replace all with the g flag.

    const substr = ['and', 'apple', 'orange', 'banana'];
      const newstr = ['and', 'apple', 'orange', 'banana'];
      document.querySelectorAll ('. sample1'). forEach ((p, index) =>{
        Array.from (p.childNodes) .filter (node ​​=>node.nodeType === Node.TEXT_NODE) ​​.forEach (text =>{
          let value = text.nodeValue;
          for (let i = 0;i


  • Answer # 4

    Tempermonky is for the time being
    If you just want to change the value of the sample1 class to a new one


    apple and orange and banana

    apple and orange and banana

    However, because it is a class process, the sample1 class may come in multiple places
    If special processing is required, such as changing the letter A to the letter B
    A mechanism that supports it is necessary.
    (The example sample simply changes the text to a new one without any comparison)

    Multiple versions

    apple and orange and banana

    apple and orange and banana

    apple and orange and banana

    apple and orange and banana

    apple and orange and banana

    apple and orange and banana

Related articles