1

Back Ground Information

I am working with SharePoint and Office.Js add in which I am creating. The project owner would like images to be inserted along with text on the fly, however all I am getting the string that I am getting back from my ajax call to SharePoint only brings the URL within in the img tag. This is a string which I am tokenizing by using 

            for (var x = 0; x < imageToInsert.length; x++) {

            seetest = imageToInsert[x].search("<img");

            if (seetest >= 0)
            {
                cleanedB64 = imageToInsert[x].toString().replace('~~end~~', '');
                imageB64.push(cleanedB64);
            }                            
        }

        var teststop = 0;
    }
    InsertPlainText(s

Question Working on a project that will need to get the "url" from with in a html img tag that I am receiving from SharePoint. Currently I have an expression which is only catching the < img part of the string but I am not getting the actual URL. The expression I am using is /img src=([^]*?) but all I am getting is "img src=" from the string <img src="/sites/ContentCenter/Graphics/map-al.jpg" alt="map al" style="width&#58;611px;height&#58;262px;" />&#160;<br></p><p><br></p><p>.

Desired Result:

I am looking to get the url with in a html img tag that I getting back from sharepoint

  • 2
    you can try using document tag: document.getElementById("img").src; – arcee123 Jul 08 '16 at 20:13
  • 1
    Why are you using a regex instead of just querying the DOM? – Josh Beam Jul 08 '16 at 20:16
  • http://stackoverflow.com/a/1732454/2714730 – Josh Beam Jul 08 '16 at 20:17
  • 1
    Possible duplicate of [RegEx match open tags except XHTML self-contained tags](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) – Josh Beam Jul 08 '16 at 20:17
  • Don't parse HTML with regexp. –  Jul 08 '16 at 20:27
  • I understand the repercussion of doing so, but I am not manipulating the html , I am getting the a string which contains a URL. That's –  Jul 08 '16 at 20:31
  • One option there create an HTML element on the fly, inject this string in its innerHTML then query it to get the src. – raphv Jul 08 '16 at 20:35
  • You are making it more complicated than what is suppose to be, I posted a good approach for what you are looking to do. – EasyE Jul 11 '16 at 20:46

4 Answers4

0

Try out http://www.regexr.com. It makes building regex super easy. If you are just looking for the /sites/ContentCenter/Graphics/map-al.jpg then try something like this

img src="([^"]*)

After imgsrc="( it will group everything until the next close quote.

Justin Olson
  • 126
  • 2
  • 13
  • Hey Justin you got the idea, but the regex expression is not capturing /sites/ContentCenter/Graphics/map-al.jpg. But if I mod it to img src="([^]*) it goes all the way to the last quote –  Jul 08 '16 at 20:24
  • I think you should take a look at what the regex you wrote means. [^] means match whatever doesn't match the thing inside the brackets. In your case you are saying match if not empty. [^"] will match anything that is not a quote. So you do the regex to find your img `img src="` and then group everything until the close quote with ([^"]*). What is your desired output from the capture group? – Justin Olson Jul 08 '16 at 20:28
0

First, the reason /img src=([^]*?) is giving you nothing is because you're saying after img src= group anything, 0 more more times, lazily, with nothing beyond it. So it goes 0 matches is the laziest of all, that's the answer!

Second, [^] is "not nothing". Just use . for "anything"

FYI: All these formulas are links to regex101

img src="(.*?)" is probably the easiest to understand: After img src=" capture anything, lazily, until you hit a ". But it's less efficient (98 steps to find the solution) than

img src="([^"]*) 17 steps. (Capture everything until you hit a " then stop) (This is what Justin suggested, and is the optimal solution)

If you want everything on that line between the two outermost "s, as your reply to Justin's post suggests,

img src="(.*)" Will match /sites/ContentCenter/Graphics/map-al.jpg" alt="map al" style="width&#58;611px;height&#58;262px; This captures everything until the last " in the string

You may also want to reference How to access capture groups in Javascript, as the match in these cases will be in capture group 1.

Community
  • 1
  • 1
TemporalWolf
  • 7,727
  • 1
  • 30
  • 50
0

I am not sure exactly what you are trying to do, but I am assuming you are just trying to get the that value of a img src tag from a string that you are getting from SharePoint. I good way top approach this is by segmenting the string then getting that tag value. This code has not been tested but it will give you a good idea of what you want to do.

                    var str = selectedContent.toString();
                    var n = str.split("split on Img tags");
                    var urls = [];
                    for (var i = 0; i < n.length; i++) {
                        var post_body = selectedContent;
                        var div = document.createElement('div');
                        div.innerHTML = post_body;
                        var firstImage = div.getElementsByTagName('img')[i]
                        var imgSrc = firstImage ? firstImage.src : "";
                        var rawImgSrc = firstImage ? firstImage.getAttribute("src") : "";
                        urls.push(rawImgSrc);
                    }

or you can use Jquery, it can be much simpler than using a pure Javascript method this example can guide you in the right direction. 

var $myString = $('.classToholdYourstring');

var test = $('img');

  $(test).each(function(d)
{
  console.log($(this).attr('src'));
});
EasyE
  • 560
  • 5
  • 26
  • Thanks, this gave me an idea of what I want to do, with out touching. Regex, it will make it much simpler. 1+ –  Jul 11 '16 at 20:43
0

To get the URL out of the string try this:

var text = '<img src="/sites/ContentCenter/Graphics/map-al.jpg" alt="map al" style="width&#58;611px;height&#58;262px;" />&#160;<br></p><p><br></p><p>'
var reg = /<img src="(.+?)"/;
var url = text.match(reg)[1];

This regex looks for anything between <img src=" and the next closest ", and the parenthesis group it.

The match call returns an array where the first element is the match, and each subsequent elements are any groups you have defined. You can then access these groups using array notation.

Kevin N
  • 1
  • 1