Replace acronym with tag abbr in HTML page

Hi Guys
I need replace acronyms with tag abbr in HTML pages.

I builded a txt database of acronyms with tag like that:

<abbr title="Laughing Out Loud">LOL</abbr>
<abbr title="Away from Keyboard">AFK</abbr>

there are any javascript library that can help me replace all words in a page (LOL, AFK, ecc, ecc) with corresponding html abbr tags?
thanks

Comments 10

  • var accros=["AFK", "LOL"];
    var tags=["Away from the kboard", "Laugh..."];
    var element=".privacy";
    document.addEventListener("DomContentLoaded", function(){
    var len=accros.length;
    var el=document.querySelector(element);
    var html=el.innerHTML;
    for(var i=0;i<len;i++){
    html=html.split(accros[i]).join("<abbr title=\""+tags[i]+"\">"+accros[i]+"</abbr>");
    }
    el.innerHTML=html;
    }

    This should do the trick. You have to modify the first 3 lines:
    var accros=["AFK", "LOL"];=>here you can add more accronymes

    var tags=["Away from the kboard", "Laugh..."];=>These are the descriptions. You have to have as many accronymes as
    descriptions otherwise it wont work.

    var element=".privacy";=>This is the html element that contains your accronymes. If you have no idea what a html element is, just replace this line with var element="body".

  • Thank you!

    But i can replace var element=".privacy" with a text area where i will paste the HTML content and start the acronymes research in the HTML with a submit button?

  • var accros=["AFK", "LOL"];
    var tags=["Away from the kboard", "Laugh..."];
    var element="textarea";
    var button="button";
    document.addEventListener("DomContentLoaded", function(){
    var len=accros.length;
    var el=document.querySelector(element);
    var button=document.querySelector(button);
    button.addEventListener("click", function(){
    var html=el.value;
    for(var i=0;i<len;i++){
    html=html.split(accros[i]).join("<abbr title=\""+tags[i]+"\">"+accros[i]+"</abbr>");
    }
    el.value=html;
    })
    })

    This should work for you. If you have more than one textarea or more than one button on your page, you have to modify the 3rd and 4th lines in the code with an id/class for the specific textarea and button you use.
    Note:I haven't the tested.

  • Can help me about that:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
    
        <script>
            var accros = ["AFK", "LOL"];
            var tags = ["Away from the kboard", "Laugh..."];
            var element = "textarea";
            var button = "button";
            document.addEventListener("DomContentLoaded", function () {
                var len = accros.length;
                var el = document.querySelector(element);
                var button = document.querySelector(button);
                button.addEventListener("click", function () {
                    var html = el.value;
                    for (var i = 0; i < len; i++) {
                        html = html.split(accros[i]).join("<abbr title=\"" + tags[i] + "\">" + accros[i] + "</abbr>");
                    }
                    el.value = html;
                })
            })
    
        </script>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button onclick="click"></button>
    
    </body>
    
    </html>
  • <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    var accros = ["AFK", "LOL"];
    var tags = ["Away from the kboard", "Laugh..."];
    var element = "textarea";
    var button = "button";
    document.addEventListener("DOMContentLoaded", function () {
    var len = accros.length;
    var el = document.querySelector(element);
    button = document.querySelector(button);
    button.addEventListener("click", function () {
    var html = el.value;
    for (var i = 0; i < len; i++) {
    html = html.split(accros[i]).join("<abbr title=\"" + tags[i] + "\">" + accros[i] + "</abbr>");
    }
    el.value = html;
    })
    })
    </script>
    </head>
    <body>
    <textarea cols="30" rows="10"></textarea>
    <button>Click</button>
    </body>
    </html>

    Your code had a few problems:the button didn't need an onclick attribute and it had no value. Also my script had a bug(DomContentLoaded instead of DOMContentLoaded). It works now.