0

I have a field where the user can enter some text including links etc. Once the data is saved and the text should be previewed I need to format all the links to a certain inline style tag set on the <a href>. There is no option to use CSS so it should be inline.

Example entered text:Some text goes here. Please go to my web site, click here <a href="http://www.onewebsite.com" target="_blank">www.onewebsite.com</a>. Then some more text here…..with more links etc……

Example text when it’s previewed:Some text goes here. Please go to my web site, click here <a href="http://www.onewebsite.com" target="_blank" style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;">www.onewebsite.com</a>. Then some more text here…..with more links etc……

Note that style="font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;" is now added on the <a href>.

How is that possible to do with JavaScript in a simple way? it would be some kind of function like:

function formatPreview(myText){
  defaultStyle="style=\"font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #fa860b;\"";
  myText = myText, find all a href and enter my defaultStyle 
  return myText
}

Please let me know. Thanks for your help.

2
  • Why would you need JavaScript? This can be achieved with CSS. Jan 16, 2013 at 15:34
  • Hi - one very important comment is that the this will be used in an e-mail meaning that the style should be inline. So I don't have any access to jQuery and CSS. All the HREF links needs to have the STYLE tag added so the links will render probaly in all e-mail clients. Jan 16, 2013 at 15:54

2 Answers 2

1

Why is there "no CSS option"? If you only want to affect links in the preview area, then (assuming your preview area has id="preview") just do this:

#preview a {
    font-family: 'Arial', 'Verdana', 'Helvetica', sans-serif;
    font-size: 12px;
    color: #fa860b;
}
1
  • Hi, it's a preview process that will shown how the acutal text will look like. I can see that I forgot to mention that the text will be insereted into a html e-mail so that's the reason why I won't have access to jQuery and CSS linking. It's need to be inline style tag so the e-mail will render probaly in all e-mail clients. Jan 16, 2013 at 15:51
1

No need to use regex for this. Simply add these styles to the link using jquery like this when you want to preview:

$("a[href='http://www.onewebsite.com']").css("font-family","Arial, Verdana, Helvetica, sans-serif"); 

$("a[href='http://www.onewebsite.com']").css("font-size","12px"); 

$("a[href='http://www.onewebsite.com']").css("color","#fa860b"); 

@Edit: Well, as many have already commented on my most, you need to include jquery library in your HTML code

@Edit 2: If you can put an ID to the achor tag, you can use the following javascript

<a id="a1" href=".."></a>

var element = document.getElementById("a1");

a1.style.fontFamily = "Arial, Verdana, Helvetica, sans-serif";

a1.style.fontSize = "12px";

a1.style.color = "#fa860b";
6
  • And where is the jQuery tag or a reference to the library on the post? Jan 16, 2013 at 15:41
  • Not to mention it's completely wrong, looking for <a><href='http://www.onewebsite.com'>Some text</href='http://www.onewebsite.com'></a> Jan 16, 2013 at 15:45
  • Hi, I won't have access to jQuery so it needs to be done with JavaScript and maybe with RegEx? Is that possible..... Jan 16, 2013 at 15:49
  • It can be done with Javascript too. Let me come up with the code for that. Jan 16, 2013 at 15:49
  • Hi @gurvinder372, unfortunately I don't have any option to put in an ID either. For some reasons I'm very limited. All links is like this <code>....<a href="onelink.com" target="_blank">my site</a></code>..... so I'm searching for a JavaScript function or RegEx that can do that for me since there is no option to use jQuery, CSS, getElementById etc. Jan 16, 2013 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.