0

I thought that my code here would work when a user sends a message that includes a http://, but it doesn't: 

function showMessage(nameStr, contentStr, textColor) {

    var node = document.getElementById("chatbox");
    var nameNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan", textColor);

    nameNode.setAttribute("x", 100);
    nameNode.setAttribute("dy", 20);
    nameNode.setAttribute("fill", textColor);
    nameNode.appendChild(document.createTextNode(nameStr));

    node.appendChild(nameNode);

    var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");

    contentStr = contentStr.replace(/((http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?)/g,
        '<a target="blank" href="$1">$1</a>');

    contentNode.setAttribute("x", 200);
    contentNode.setAttribute("fill", textColor);
    contentNode.innerHTML = contentStr;

    // Add the name to the text node
    node.appendChild(contentNode);
}

Can anyone find an error within this code?

  • nameStr is the name of the person sending the message,
  • contentStr is what the user input, and which the program should automatically change so any hyperlinks become clickable links, and
  • textColor is just the color of the message.
trincot
  • 317,000
  • 35
  • 244
  • 286
Kevin Sai
  • 1
  • 1
  • Welcome to Stack Overflow. Your code is a bit too complex for the question you're asking. Please read: http://stackoverflow.com/help/mcve Perhaps only one line is relevant. Have you tested it in isolation? – KIKO Software Jul 16 '16 at 10:11
  • That regex makes a lot of faulty assumptions about URLs. – zzzzBov Jul 16 '16 at 13:44
  • I think the code works fine when I checked the replacing script :/ – Shrikantha Budya Jul 16 '16 at 13:51
  • Exactly which part does not work? The text does not appear? The color is wrong? The hyperlinks don't work? – trincot Jul 16 '16 at 15:13
  • The code in this question seems remarkably similar to the code [in this question](http://stackoverflow.com/questions/38408663/hyperlink-in-tspan-svg-not-shown). Why is that? – Robert Longson Jul 16 '16 at 18:30

1 Answers1

1

To make hyperlinks work inside an svg element, you should set up the XLink namespace, in addition to the default one for svg:

<svg width="500" height="500" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

Then you can use the xlink:href attribute:

<a xlink:href="http://www.example.com">click here</a>

Taking it all together in this snippet:

function showMessage(nameStr, contentStr, textColor) {

    var node = document.getElementById("chatbox");
    var nameNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan", textColor);

    nameNode.setAttribute("x", 100);
    nameNode.setAttribute("dy", 20);
    nameNode.setAttribute("fill", textColor);
    nameNode.appendChild(document.createTextNode(nameStr));

    node.appendChild(nameNode);

    var contentNode = document.createElementNS("http://www.w3.org/2000/svg", "tspan");

    contentStr = contentStr.replace(/((http|https|ftp|ftps)\:\/\/[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(\/\S*)?)/g,
        '<a fill="purple" target="blank" xlink:href="$1">$1</a>'); // "xlink:" added!

    contentNode.setAttribute("x", 200);
    contentNode.setAttribute("fill", textColor);
    contentNode.innerHTML = contentStr;

    // Add the name to the text node
    node.appendChild(contentNode);
}
// Sample call:
showMessage('John Doe', 'click this http://www.example.com', 'blue');
a {
  text-decoration: underline;
}
<svg width="500" height="500" 
     xmlns="http://www.w3.org/2000/svg"   
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     version="1.1">

<text id="chatbox"></text>

</svg>
trincot
  • 317,000
  • 35
  • 244
  • 286